html - 向右浮动属性 block 另一个 div

Question

所以你可以看到我有三个 div。在 div "about"中，我设置了背景颜色，并有一些标题， 但是当我为 div“boxes”设置 float:right 属性时，它会阻止 div“about”。

谁能告诉我为什么会这样？

谢谢!

这是我的 HTML:

<div id="about">

<div id="content_holder">

<div class="boxes_8"><img src="images/jack.jpg" width="227" height="227" alt="jack">      </div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div> </div>
</div>

和CSS:

#content_holder{
display: block;
position: relative;
margin: 0 auto;
margin-top:10px;
width: 910px;
min-height: 20px;}

.boxes{
display:block;
float: left;
width: 227.5px;
height:227.5px;}
#about{
background-image: linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);
background-image: -o-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);
background-image: -moz-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);
background-image: -webkit-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);
background-image: -ms-linear-gradient(bottom, rgb(75,72,71) 0%, rgb(37,37,35) 69%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(75,72,71)),
color-stop(0.69, rgb(37,37,35))
);
}

Answer 1

我对您试图从您的代码中完成什么感到有点困惑。因为您的 .boxes div 是 float 的，所以它们实际上会滑出 #content_holder 容器，除非您添加以下 css:

#content_holder:after{
    content: '';
    display: block;
    visibility: invisible;
    clear: both;
}

这将确保您的#content_holder 环绕您的.boxes div(这就是我假设您想要的，因为它们在HTML 中)。您的第一个框，里面有 img 的框，在您提供的代码中根本没有 CSS 样式，因此它会拉伸(stretch)以填充整行。这是您想要的，还是您希望所有 .boxes div 排成一行(或几行)？如果是这样，请更改以下行:

.boxes{

为此:

.boxes, .boxes_8{

这将导致 .boxes_8 div 让其他框进入它的右侧。

你想要实现什么样的布局？如果您详细说明，我可以提供更有帮助的答案。