blocks|key|1758999|text|你可以在你的内部div上使用display:table-cell来做这件事。为了使浏览器的内部div表现得像表格单元格一样，它还需要两层包含元素:一层用作表格，另一层用作表格行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1759000|对于这样的结构：|1759001|+++<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>|code-block|syntax|javascript|1759002|使用此CSS：|1759003|div.outer+{display:table;}
div.middle+{display:table-row;}
div.inner+{display:table-cell;}|1759004|一个不错的结构是包装在DIV中的UL+:DIV充当表，UL充当行，LI充当表格单元。|1759005|这种技术在较旧的浏览器中不受很好的支持-对于任何比IE8更早的浏览器，您都是完全不走运的。|1759006|如果你需要更多的示例代码，请让我知道！|1759007|entityMap^0|E|I|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|16|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|17|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

<p>You can use <code>display:table-cell</code> on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.</p>

<p>For a structure like this:</p>

<pre><code>   &lt;div class="outer"&gt;
       &lt;div class="middle"&gt;
          &lt;div class="inner"&gt;Item 1&lt;/div&gt; 
          &lt;div class="inner"&gt;Item 2&lt;/div&gt; 
          &lt;div class="inner"&gt;Item 3&lt;/div&gt; 
          &lt;div class="inner"&gt;Item 4&lt;/div&gt; 
       &lt;/div&gt;
   &lt;/div&gt;
</code></pre>

<p>Use this CSS:</p>

<pre><code>div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}
</code></pre>

<p>A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.</p>

<p>This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.</p>

<p>Let me know if you need more sample code than that!</p>


blocks|key|1972650|text|你可以在这里利用css3的好处。我也面临着这个问题，现在我已经修复了使用下面的示例代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1972651|​|1972652|.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;
}|code-block|syntax|javascript|1972653|<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>|1972654|1972655|谢谢和问候，Lingeshram|1972656|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You can utilize css3 benefits here. I was also facing this issue now i have fixed that using below example code</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="parent-container"&gt;
  &lt;li class="child-item"&gt;1&lt;/li&gt;
  &lt;li class="child-item"&gt;2&lt;/li&gt;
  &lt;li class="child-item"&gt;3&lt;/li&gt;
  &lt;li class="child-item"&gt;4&lt;/li&gt;
  &lt;li class="child-item"&gt;5&lt;/li&gt;
  &lt;li class="child-item"&gt;6&lt;/li&gt;
  &lt;li class="child-item"&gt;7&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks &amp; Regards,
Lingeshram</p>


blocks|key|1759134|text|我想阐述一下@lingeshram的答案。Flexboxes已经走了这么远，我认为这是现在真正的方式。如果您必须支持旧的浏览器，请务必首先检查caniuse。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1759135|​|1759136|.container+{
++display:+flex;+/*+or+inline-flex+*/
}

.col+{
++flex-grow:+1;
++border:+1px+solid+#000;
}

.col2x+{
++flex-grow:+2;
++border:+1px+solid+#000;
}|code-block|syntax|javascript|1759137|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>|1759138|1759139|这是一个很好的guide，你可以通过不同的方式使用flexbox。|1759140|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#search=display%253A%2520flex/|1|https://css-tricks.com/snippets/css/a-guide-to-flexbox/^0|1Z|7|0|0|0|0|0|0|7|5|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|P|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]]]

<p>I'd like to expound on @lingeshram's answer. Flexboxes have come so far that I think it's really the way to do it now. If you have to support old browsers, be sure to check <a href="https://caniuse.com/#search=display%3A%20flex/" rel="nofollow noreferrer">caniuse</a> first.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  display: flex; /* or inline-flex */
}

.col {
  flex-grow: 1;
  border: 1px solid #000;
}

.col2x {
  flex-grow: 2;
  border: 1px solid #000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Evenly split three children
&lt;div class='container'&gt;
  &lt;span class='col'&gt;Inner 1&lt;/span&gt;
  &lt;span class='col'&gt;Inner 2&lt;/span&gt;
  &lt;span class='col'&gt;Inner 3&lt;/span&gt;
&lt;/div&gt;

&lt;br&gt;
Evenly split two children
&lt;div class='container'&gt;
  &lt;span class='col'&gt;Inner 1&lt;/span&gt;
  &lt;span class='col'&gt;Inner 2&lt;/span&gt;
&lt;/div&gt;

&lt;br&gt;
Split three children, but the middle is twice the size of the others
&lt;div class='container'&gt;
  &lt;span class='col'&gt;Inner 1&lt;/span&gt;
  &lt;span class='col2x'&gt;Inner 2&lt;/span&gt;
  &lt;span class='col'&gt;Inner 3&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Here is a pretty good <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">guide</a> to the different ways you can use flexbox.</p>


<p>I have a varying number of inline-block divs that I want to collectively take up 100% of their parent.  Can this be done <em>without JavaScript</em>?  The only way I can think of is with a table but it's of course bad practice to use a table solely for layout purposes.</p>

<pre><code>|----------------------|
|{  div 1  }{  div 2  }|
           or
|{div 1}{div  2}{div 3}|
|----------------------|
</code></pre>

<p>I have also tried <code>{ display:block; float:left; }</code> but it doesn't seem to make a difference.</p>


Divide Width of Element Between Child Divs With CSS

我有不同数量的内联块div，我希望它们一起占据它们父级的100%。没有JavaScript可以做到这一点吗？我能想到的唯一方法就是使用一个表，但是仅仅为了布局的目的使用一个表当然是不好的做法。|----------------------||{  div 1  }{  div 2  }|           or|{d...

问使用CSS在子Div之间划分元素的宽度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS在子Div之间划分元素的宽度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS在子Div之间划分元素的宽度
EN