开始了一个在顶部包含 3 列 div 的元素 - 300px/dynamic/350px。右边的 div 低于其他的:http://jsfiddle.net/tspencer103/b49mfno4/1/ .
我在这里尝试了几个建议,比如 http://jsfiddle.net/22YBU/ .没有运气。有什么建议么?谢谢。
div #div_1 {
float: left;
height: 50px;
background-color: red;
width: 300px;
}
div #div_2 {
height: 50px;
margin: 0px 350px 0px 300px;
background-color: green;
text-align: center;
}
div #div_3 {
float: right;
height: 50px;
background-color: blue;
width: 350px;
}
<div id="container">
<div id="div_1">LEFT STATIC 300px</div>
<div id="div_2">CENTER DYNAMIC</div>
<div id="div_3">RIGHT STATIC 350px</div>
</div>
最佳答案
如果您对更简单、更现代的方法感兴趣,请放弃 float 并使用 flexbox :
HTML(无变化)
<div id="container">
<div id="div_1">LEFT STATIC 300px</div>
<div id="div_2">CENTER DYNAMIC</div>
<div id="div_3">RIGHT STATIC 350px</div>
</div>
CSS
#container {
display: flex;
}
#div_1 {
background-color: red;
width: 300px;
height: 50px;
}
#div_2 {
background-color: green;
text-align: center;
height: 50px;
flex: 1; /* flexible width */
}
#div_3 {
background-color: blue;
width: 350px;
height: 50px;
}
Flexbox 的好处:
- 最少的代码;非常有效率
- centering, both vertically and horizontally, is simple and easy
- equal height columns are simple and easy
- multiple options for aligning elements
- react 灵敏
- float 框提供的布局容量有限,因为它们从未用于建筑布局,与 float 框不同,flexbox 是一种具有广泛选项的现代 (CSS3) 技术。
注意所有主流浏览器都支持 flexbox,except IE 8 & 9 .一些最新的浏览器版本,例如 Safari 8 和 IE10,需要 vendor prefixes .要快速添加所需的所有前缀,请在此处的左侧面板中发布您的 CSS:Autoprefixer .
关于html - 具有动态中间的 3 列 div - 右 div 下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34189589/