我正在尝试设计一个响应式页面.我有两个高度相同的div.
它们都具有max-width属性,并且max-width正在工作.一旦我添加了float：left属性,max-width不会影响它们.
它们都具有max-width属性,并且max-width正在工作.一旦我添加了float：left属性,max-width不会影响它们.
这是一个例子：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;
}
我希望它们垂直对齐.有没有其他方法可以使它除浮动和
保持最大宽度？
解决方法
使用定义的宽度百分比和浮点数：
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;
}
使用内联块定义的宽度百分比：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;
}
内联块,当第二个块无法再容纳在容器内而不是收缩时,它会掉落：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;
}
