css-float - 最大宽度不适用于 float

Question

我正在尝试设计响应式页面。我有 2 个高度相同的 div。它们都具有 max-width 属性并且 max-width 正在工作。一旦我添加了 float:left 属性，最大宽度就不会影响它们。

这是一个例子:jsfiddle

<div class="color1">
   Some Text
</div>
<div class="color2">
    Bla
</div>
<div style="clear: both;">

和CSS:

div{
    height: 100px;
    float: left;
}
.color1{
    background-color: #6AC1FF;
    max-width: 400px;
}
.color2{
    background-color: #BDBCF4;
    max-width: 100px;
}

我希望它们垂直对齐。除了 float 和保持最大宽度？

Answer 1

使用定义的宽度百分比和 float :http://jsfiddle.net/dEEW5/3/

div{
    height: 100px;
    display:block;
    float:left;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width: 20%;
    max-width:100px;
}

使用行内 block 定义的宽度百分比:http://jsfiddle.net/dEEW5/4/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 80%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:20%;
    max-width:100px;
}

当第二个 block 不再适合容器而不是收缩时，第二个 block 下降的内联 block :http://jsfiddle.net/dEEW5/5/

body{font-size:0}
div{
    height: 100px;
    display:inline-block;
    font-size:16px;
}
.color1{
    background-color: #6AC1FF;
    width: 100%;
    max-width:400px;
}
.color2{
    background-color: #BDBCF4;
    width:100%;
    max-width:100px;
}