Question

我的主要问题是这段代码：

CSS：

 .picWrapper {
     width:250px;
     border: 1px solid black;
 }
 .picThumb {
     width:250;
     height:250;
     margin:auto;
     padding-bottom:10PX;
     text-align: center;
 }
 .picRating {
     width:250;
     height:90;
     text-align: center;
     padding-bottom:10px;
 }
 .picFilename {
     width:230;
     height:90;
     margin: auto;
     text-align: center;
     padding-bottom:5px;
 }
 .picBottomButtons {
     width:83px;
     float:left;
     text-align: center;
 }

HTML：

<div class="picWrapper">
    <div class="picThumb">
        <img src="http://placehold.it/250x250" />
    </div>
    <div class="picRating">Rate this picture: 1 2 3 4 5 6 7</div>
    <div class="picFilename">abcd.jpg</div>
    <div class="picBottomButtons">1</div>
    <div class="picBottomButtons">2</div>
    <div class="picBottomButtons">3</div>
</div>

由于某种原因，最后三个DIV（使用类picBottomButtons）显示在包装器的外部。我是CSS3的菜鸟，有人可以解释为什么底线不在包装中吗？

Answer 1

这是因为你在那些底部按钮上使用浮动，但没有其他任何东西浮动。基本上你有不同规则的东西。删除浮动并添加display: inline-block，你应该是好的。您可能还需要调整宽度。

更新了小提琴 http://jsfiddle.net/7j5d9bcy/4/

Answer 2

我会使用display：inline-block而不是浮动图像。如上所述，浮动从DOM中删除元素。它并没有按照规定对它们进行绝对定位，但它确实将它们排除在外。

我已将您的JS小提琴更新为以下内容：

<强> CSS：

.picBottomButtons{
    width:50px;
    display: inline-block;
    text-align: center;
}

我改变了图像的宽度，所以当内联它们都水平放置时。我也改变了浮动：左边显示：inline-block。

此处示例：

http://jsfiddle.net/7j5d9bcy/5/

Answer 3

这是因为浮动.picBottomButtons元素，只需使用clearfix：

.picWrapper:before, 
.picWrapper:after {
    content: " ";
    display: table;
}
.picWrapper:after {
    clear: both;
}

FIDDLE

您还可以将overflow: auto;添加到.picWrapper，更多信息如何clear floats with overflow。

Understanding CSS Floats

为什么最后一行掉出包装？

3 个答案: