试图使第3个div“浮动”在2个div（即“向左浮动”和“向右浮动”）上

Question

我有2个div，一个向左浮动（＃div1），另一个向右浮动（＃div2）。 我需要添加第三个div（＃div3），该div集中浮在这些上面。 我目前正在尝试使用z-index。 但是我得到一些奇怪的效果，例如div1和div2被压低。 同样，“容器” div集中对齐所有子div。

因此，对于一些代码：

<div id="container" style="width: 980px;margin-left: auto;margin-right: auto; height:130px">
  <div id="div1" style="float:left">Div1</div>
  <div id="div2" style="float:right">Div1</div>
  <div id="div3" style="border:1px solid black;colour:black;position:relative; top:0px, left:auto; z-index:1000">I look like a button and I float the other divs, in a central location</div>
</div>

我真的很感谢上面提供的正确代码的一些指导，以确保＃div3确实浮在＃div1和＃div2上方并且位于中心。

提前致谢。

Answer 1

首先，第3格上的style属性没有关闭。 采用 ; 分隔样式属性中的样式声明。 和它的颜色，不是颜色，我也建议使用css

这是一个代笔： http ://codepen.io/Vall3y/pen/QwWPYd

如果您想让容器漂浮在中心位置，那么它就足以给它留出一定的margin: auto给第3个div设置宽度和自动余量，我会假设您会得到想要的结果。 我还删除了一些不必要的语句，例如相对位置

#div3 {
  border:1px solid black;
  color:black;  
  margin: auto;
  width: 30%;
}

继承人一个代笔： http ://codepen.io/Vall3y/pen/gbOyEb

还可以考虑使用display: flex将浮标完全display: flex并抛开http://codepen.io/Vall3y/pen/ogNOVV

如果您想了解更多关于flexbox的信息，我建议您参考csstricks文章http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您确实应该将CSS和HTML分开，但这就是我所做的...

在您的div3中添加width:inherit heritit，并在其position:absolute添加position:absolute ：

<div id="container" style="background-color:lightgrey;width: 480px;margin-left: auto;margin-right: auto; height:130px">
  <div id="div1" style="float:left">Div1</div>
  <div id="div2" style="float:right">Div1</div>
  <div id="div3" style="border:1px solid black;colour:black; top:0px, left:auto; z-index:1000; position:absolute; width:inherit;">I look like a button and I float the other divs, in a central location</div>
</div>

您可以修改宽度以调整div3的着陆位置，因此可以根据需要在它们之间居中。

工作的JSFiddle： http ： //jsfiddle.net/re2hkbgh/1/

如果这不完全是您想要的效果，那么只需按宽度播放即可获得想要的效果，因为这是您要的位置！ :)

Answer 3

我认为您需要添加到#div3显示属性： inline-block ，并将text-align: center为#container ， 在此处查看

Answer 4

无需相对或绝对定位的元素！ 这应该给您您想要的：

CSS：

#container{width: 580px; border:2px solid orange; height:350px;}
#div1{border:2px solid blue; width:260px; height:100px; float:left;}
#div2{border:2px solid green; width:260px; float:right; height:100px;}
#div3{border:1px solid black; width:100%; float:left; height:100px;}

HTML：

<div id="container" >
    <div id="div3">I look like a button and I float the other divs, in a central location</div>
  <div id="div1">Div1</div>
  <div id="div2">Div3</div>
</div>

这是现场演示：

http://jsfiddle.net/Lza5fz43/