Question

所以你可以看到我有三个div。在div“约”我设置了背景颜色，并有一些标题，但是当我设置浮动时：对于div“box”的右侧属性，它会阻止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是浮动的，它们实际上会滑到#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让其他框放在右边。

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

浮动右边属性块另一个div

1 个答案: