使用CSS在子Div之间划分元素的宽度
使用CSS在子Div之间划分元素的宽度
提问于 2011-07-09 04:10:51
我有不同数量的内联块div，我希望它们一起占据它们父级的100%。没有JavaScript可以做到这一点吗？我能想到的唯一方法就是使用一个表，但是仅仅为了布局的目的使用一个表当然是不好的做法。
|----------------------|
|{ div 1 }{ div 2 }|
or
|{div 1}{div 2}{div 3}|
|----------------------|我也尝试过{ display:block; float:left; }，但似乎没有什么不同。
回答 3
Stack Overflow用户
回答已采纳
发布于 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更早的浏览器，您都是完全不走运的。
如果你需要更多的示例代码，请让我知道！
Stack Overflow用户
发布于 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
Stack Overflow用户
发布于 2020-04-27 20:17:40
我想阐述一下@lingeshram的答案。Flexboxes已经走了这么远，我认为这是现在真正的方式。如果您必须支持旧的浏览器，请务必首先检查caniuse。
.container {
display: flex; /* or inline-flex */
}
.col {
flex-grow: 1;
border: 1px solid #000;
}
.col2x {
flex-grow: 2;
border: 1px solid #000;
}Evenly split three children
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col'>Inner 2</span>
<span class='col'>Inner 3</span>
</div>
<br>
Evenly split two children
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col'>Inner 2</span>
</div>
<br>
Split three children, but the middle is twice the size of the others
<div class='container'>
<span class='col'>Inner 1</span>
<span class='col2x'>Inner 2</span>
<span class='col'>Inner 3</span>
</div>
这是一个很好的guide，你可以通过不同的方式使用flexbox。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6629951
复制相关文章
相似问题