使用 CSS 在子 Div 之间划分元素的宽度答案

【问题标题】：Divide Width of Element Between Child Divs With CSS使用 CSS 在子 Div 之间划分元素的宽度
【发布时间】：2011-10-01 13:52:38
【问题描述】：

我有不同数量的内联块 div，我希望它们共同占用 100% 的父级。 没有 JavaScript 可以做到这一点吗？我能想到的唯一方法是使用表格，但将表格仅用于布局目的当然是不好的做法。

|----------------------|
|{  div 1  }{  div 2  }|
           or
|{div 1}{div  2}{div 3}|
|----------------------|

我也尝试过{ display:block; float:left; }，但似乎没有什么不同。

【问题讨论】：

您想在不设置明确的width 百分比的情况下执行此操作吗？
是的 - 你想要表格列的显示模式 - 但这并不意味着你需要在 HTML 中添加表格。看我的回答...

标签： css layout semantic-markup

【解决方案1】：

您可以在您的内部 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 的浏览器，您完全不走运。

如果您需要更多示例代码，请告诉我！

【讨论】：

非常感谢 Beejamin！我当然没想到 Fx 5.0 会像“旧版浏览器”一样运行。虽然它没有将它们均匀地分开，但它已经足够接近了。顺便说一句，谁在乎它是否在 IE 中不起作用？ ;-)
@Fantabulum：不要在divs 上用display: table-cell 设置任何width，在div 上用display: table 设置table-layout: fixed。
这也适用于li 和ul 吗？我有一个项目符号列表菜单，我希望lis 占据整个空间除以元素数。我尝试将ul 设置为display:table 并将li 设置为display: table-cell，但这不起作用。有什么解决方法可以将其保留为项目符号列表？
是的，@Shimmy，您需要将列表包装在另一个元素中：包装器是 display:table;，ul 是 display:table-row，li 是 display:table-cell。我已经编辑了我的答案，以便通过当前信息更清楚地说明这一点。
@Beejamin，谢谢。那行得通。但是，lis 不是均匀划分的，它们的宽度取决于它包含的文本，有没有办法让元素的宽度彼此相等？（Here 是网站）

【解决方案2】：

您可以在这里利用 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>

感谢和问候，灵芝

【讨论】：

您能否解释一下，要完成这项工作实际上需要什么，而不是只写一些代码？

【解决方案3】：

接受的答案错过了一个重要的 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;}

【讨论】：

【解决方案4】：

我想解释一下@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 的不同方式。

【讨论】：