用CSS划分子div之间元素的宽度

Question

我有不同数量的内联块div，我想总共占它们父div的100%。这可以做到没有JavaScript?我能想到的唯一方法就是使用表格，但仅仅为了布局目的而使用表格当然是不好的做法。

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

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

Answer 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更早的浏览器，你就完全不走运了。

让我知道如果你需要更多的示例代码比这!

Answer 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>

谢谢,问候,Lingeshram

Answer 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;}

Answer 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>

这里有一个很好的指南，教你如何使用flexbox