试图让第 3 个 div “浮动” 2 个 div，它们是“向左浮动”和“向右浮动”答案

【问题标题】：trying to get a 3rd div to "float over" 2 divs which are "float left" and "float right"试图让第 3 个 div “浮动” 2 个 div，它们是“向左浮动”和“向右浮动”
【发布时间】：2015-01-14 13:20:36
【问题描述】：

我有 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 之上，并且位于中心位置。

提前致谢。

【问题讨论】：

关闭div3 中的style 属性。 "最后不见了
将position: relative 添加到您的#container div，并为您的div3 设置position: absolute;
仅供参考，您在 div3 上的 style 属性上缺少一个结束引号，这可以保证提升您的样式。
谢谢。缺少引用的错字，但 CSS 问题是我问题的主要原因……我担心。

标签： html css

【解决方案1】：

您确实应该将您的 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/

如果这不是您想要的，只需使用宽度来获得您想要的效果，因为这是您要求的定位！ :)

【讨论】：

谢谢。只是试图让您的代码的#div3 居中于#div1 和#div2 之间，并尊重z=index。目前只是挣扎，如果我改变#div3宽度属性，似乎左对齐，如果我改变所有div合同的#container宽度属性，所以我无法在#div1和#div2/之间获得#div3也许我错过了一些基本的东西。一个例子会很有用。再次感谢。
@SamJolly 类似：jsfiddle.net/re2hkbgh/2（删除您的顶部和左侧样式）
谢谢。更改#div3 仍然左对齐#div3。最后我选择了@vall3y。还是谢谢。
@SamJolly 没问题，很高兴您的问题得到解决！

【解决方案2】：

我认为你需要添加到#div3显示属性：inline-block，并将text-align: center设置为#container，看看here

【讨论】：

也不错。谢谢。

【解决方案3】：

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

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/

【讨论】：

好吧，我误解了：“我需要添加第三个 div(#div3)，它位于这些 div 的中心位置。”
显然我的评论被删除了。没错，这是误导。但他确实说了他不想说的话；）

【解决方案4】：

首先，第三个 div 的 style 属性没有关闭。采用 ;在 style 属性中分隔样式语句。还有它的颜色，不是颜色我还建议使用 css

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

如果你想让容器漂浮在中心，它足以给它margin: auto 给第三个 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/

【讨论】：

感谢您的帮助。