Question

我有2个div，一个向左浮动（＃div1），另一个向右浮动（#div2）。我需要添加第三个div（＃div3），它们集中浮动。我目前正在尝试使用z-index。然而，我得到一些奇怪的效果，如div1和div2强制下降。还有＆＃34;容器＆＃34; 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个div上的style属性没有关闭。使用 ;在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并完全抛弃浮动 http://codepen.io/Vall3y/pen/ogNOVV

如果您想了解有关flexbox的更多信息，请参阅csstricks文章http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

你真的应该把CSS和HTML分开，但这就是我做的......

将width:inherit添加到您的div3和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，请查看here

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/

试图获得第3个div到＆＃34;漂浮在＆＃34; 2个div是＆＃34;向左浮动＆＃34;并且＆＃34;向右浮动＆＃34;

4 个答案: