我正在尝试设计一个响应式页面.我有两个高度相同的div.
它们都具有max-width属性,并且max-width正在工作.一旦我添加了float:left属性,max-width不会影响它们.
它们都具有max-width属性,并且max-width正在工作.一旦我添加了float:left属性,max-width不会影响它们.
<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; }
原文地址:https://www.jb51.cc/css/214057.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。