Question

JSFiddle.

<div class="content clearfix">
    <div class="left">img Left</div>
    <div class="center">Text Center</div>
    <div class="right">img Right</div>
</div>

<小时/>

.content {
        width: 100%;
        height: 80px;
        border:1px solid #333;
    }
    .center {
       width: 400px;
       margin:0 auto;
       text-align: center;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }

我使用float来布局页面。左侧和中心element表现良好。但img Right被打破了。我找不到原因以及我使用的line-hegiht更多，崩溃更严重。谢谢你的优势。

Answer 1

您的.center元素未浮动且居中。如果你检查它，你会看到左边和右边的水平边距（margin : 0 auto;）。

对于.left元素，它没问题，它出现在.center元素之前且它不在浮点数之内，因此.center元素只是忽略它。但是.right元素之后，它必须考虑以前的HTML元素（这里：.center）。这就是.right元素在.center元素下的原因。

所以，有些解决方案：

您可以对.right元素使用绝对定位：position: absolute; top: 0; right: 0;（那里：http://jsfiddle.net/pg7v4js3/2/）
其他解决方案取决于您尝试实现的实际布局

Answer 2

这是一个新的小提琴：Fiddle

.clearfix:after{
}
.content{
    width: 100%;
    height: 80px;
    border:1px solid #333;
}

.center{width: 80%; float: left; text-align: center;}
.left{float: left; width:10%;}
.right{float: right; width:10%;}

为什么'img right`崩溃？

2 个答案: