使多个浮动 div 彼此相邻居中

Posted 2023-03-05

【中文标题】使多个浮动 div 彼此相邻居中

【英文标题】：Center multiple floating divs next to each other

【发布时间】：2013-08-30 20:43:04

【问题描述】：

我应该让 3 个divs 并排坐下。所以我创建了一个div 并放入了三个divs，使用这种css 样式：

div.holder div 
  float: left;
  width: 250px;
  background-color: yellow;   

  /*margin-right:auto;  /**These did not help**/
  margin-left:auto;  */

像这样的html：

<div class="holder">
  <div></div>
  <div></div>
  <div></div>
</div>

它应该看起来像这样： 相反，它看起来像这样：

边框divs 应与灰线末端对齐。

【问题讨论】：

如果你想让你的“gold div”贴在右边，那就让​​它float: right。

@Brewal 这是个好主意。现在，如果您知道一种将银色放在中间的方法，那我就完成了。也许我会试试margin:auto。

以下线程正是您要查找的内容Fluid width with equally spaced DIVs

哦 - 对不起，我找不到要搜索的正确查询。

【参考方案1】：

您正在为宽度指定一个像素值。无论您对浮点数做什么，这些像素值都是固定的，永远不会到达边框的末端。您可以将宽度设置为一个百分比，例如width: 33%;。你也可以设置你的左右边距来隔开你的 div，比如margin: 0 20px;。

在这些情况下，我通常会做的是将我的元素包装在一个 div 中，并使用该 div 来定位元素。然后，我将用于背景颜色、文本颜色等的内部容器。类似的东西可能对你有用：

<div class="holder">
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
</div>

还有 CSS：

.wrapper 
    float:left;
    width:33%;

.container 
    background-color: yellow;
    margin: 10px;
    padding: 20px;

这是一个小提琴：http://jsfiddle.net/bWFS8/

【参考方案2】：

这就是我想要 div 彼此相邻时使用的方法：

CSS：

#menuitem 
font-weight:bold;
border-right-style:solid;
font-size:10.7px;
border-right-width:1px;
border-left-width:1px;
height:30px;
position:relative;


#menuitem span 
position:absolute;
text-align: center;


#menubar 
margin-top:10px;
position:absolute;
left:0px;
font-family:Verdana, Geneva, sans-serif;

HTML：

<div id="menubar">
<div style="float:left;width:104px;border-left-style:solid;" id="menuitem"><span style="bottom:9px;width:104px;">Menu Item 1</span></div>
<div style="float:left;overflow:hidden;width:78px;" id="menuitem"><span style="bottom:7px;width:78px;">Menu Item 2</span></div>
<div style="float:left;overflow:hidden;width:100px;" id="menuitem"><span style="bottom:9px;width:100px;">Menu Item 3</span></div>
</div>

希望我能帮上忙。

【参考方案3】：

如果您要让它们全部水平对齐，那么您真的应该使用无序列表样式来显示带有zoom:1 和display:inline 的内联块。

没有理由使用浮动来将它们并排放置。