3

我应该让 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>

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

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

4

3 回答 3

5

您正在为您的宽度指定一个像素值。无论您对浮点数做什么，这些像素值都是固定的，永远不会到达边框的末端。您可以做的是将宽度设置为百分比，例如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/

于 2013-08-27T22:47:50.073 回答
0

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

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

于 2013-08-28T04:07:32.190 回答
0

这就是我希望 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>

希望我有所帮助。

于 2013-12-24T08:03:23.490 回答