[英]How do I get the remaining divs to fill up space horizontally in a parent div?
Here's what I'm working with:这是我正在使用的:
<div id="parentDiv">
<div id="labelDiv"></div>
<div class="contentDiv"></div>
<div class="contentDiv"></div>
<div class="contentDiv"></div>
<!-- ... -->
</div>
labelDiv
is always a fixed size. labelDiv
始终是固定大小。 In this case, 30px.在这种情况下,30 像素。 parentDiv
is set to a width of 75%. parentDiv
设置为 75% 的宽度。 There can be 1 to any number of contentDiv
.可以有 1 到任意数量的contentDiv
。 What I want is to evenly space out the contentDiv
objects.我想要的是均匀地contentDiv
对象。 I'm trying to do this all in CSS (2.1, if possible).我试图在 CSS (如果可能的话,2.1)中完成这一切。 I was able to write a quick jQuery function to equally space out the divs, but I don't feel like its the best solution.我能够编写一个快速的 jQuery function 来平均分隔 div,但我不觉得它是最好的解决方案。
Any ideas?有任何想法吗?
display: table; table-layout: fixed
display: table; table-layout: fixed
can do this. display: table; table-layout: fixed
可以做到这一点。
This is all CSS 2.1 as requested, but check the browser support - it works everywhere except IE6/7.这就是CSS 2.1 所要求的,但请检查浏览器支持- 它适用于除 IE6/7 之外的任何地方。
See: http://jsfiddle.net/thirtydot/Ec8Tw/见: http://jsfiddle.net/thirtydot/Ec8Tw/
CSS: CSS:
#parentDiv {
display: table;
table-layout: fixed;
width: 75%;
height: 100px;
border: 1px solid #444
}
#parentDiv > div {
display: table-cell;
border: 1px dashed #f0f
}
#labelDiv {
width: 30px;
background: #ccc
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.