我有不同数量的内联块div,我希望它们一起占据它们父级的100%。没有JavaScript可以做到这一点吗?我能想到的唯一方法就是使用一个表,但是仅仅为了布局的目的使用一个表当然是不好的做法。
|----------------------|
|{ div 1 }{ div 2 }|
or
|{div 1}{div 2}{div 3}|
|----------------------|
我也尝试过{ display:block; float:left; }
,但似乎没有什么不同。
发布于 2011-07-09 04:16:58
你可以在你的内部div上使用display:table-cell
来做这件事。为了使浏览器的内部div表现得像表格单元格一样,它还需要两层包含元素:一层用作表格,另一层用作表格行。
对于这样的结构:
<div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>
使用此CSS:
div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}
一个不错的结构是包装在DIV中的UL :DIV充当表,UL充当行,LI充当表格单元。
这种技术在较旧的浏览器中不受很好的支持-对于任何比IE8更早的浏览器,您都是完全不走运的。
如果你需要更多的示例代码,请让我知道!
发布于 2015-11-04 01:23:52
被接受的答案遗漏了一个重要的CSS属性,这是工作所必需的:
表格-布局:固定;
这是正确的答案:
HTML:
<div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>
</div>
CSS:
div.outer {display:table; table-layout: fixed;}
div.middle {display:table-row;}
div.inner {display:table-cell;}
发布于 2015-11-26 18:48:46
你可以在这里利用css3的好处。我也面临着这个问题,现在我已经修复了使用下面的示例代码
.parent-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
-webkit-justify-content: space-around;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
}
.child-item {
margin: 5px;
text-align: center;
padding: 10px;
background-color: red;
color: #fff;
}
<ul class="parent-container">
<li class="child-item">1</li>
<li class="child-item">2</li>
<li class="child-item">3</li>
<li class="child-item">4</li>
<li class="child-item">5</li>
<li class="child-item">6</li>
<li class="child-item">7</li>
</ul>
谢谢和问候,Lingeshram
https://stackoverflow.com/questions/6629951
复制相似问题