0

所以你可以看到我有三个 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))
);
}
4

1 回答 1

0

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

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

这将确保您的 #content_holder 环绕您的 .boxes div（这是我假设您想要的，因为它们在 HTML 中）。你的第一个盒子，里面有 img 的盒子，在你提供的代码中根本没有 CSS 样式，所以它会伸展以填满整行。这是你想要的，还是你想要所有的 .boxes div 排成一行（或几行）？如果是这样，请更改以下行：

.boxes{

对此：

.boxes, .boxes_8{

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

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

于 2013-03-25T01:19:41.717 回答