blocks|key|552836|text|因为您只能以1px的最大精度来设置元素的宽度，所以可能有一个div大于其他的div，因此您无法真正避免这一点。尽管如此，要使最后一个div填充剩余的1-2px，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|552837|.wrap+#div3+{width:33.4%25;}|code-block|syntax|javascript|552838|其中#div3是最后一个div的id+(或者任何一个div，但只有一个)。|552839|entityMap^0|6|3|22|5|0|0|2|5|C|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>Since you can only set the width of an element with a maximum precision of <code>1px</code>, there may be one div that is larger than the others and you can't really avoid this. Having said that, to make the last div fill the remaining <code>1-2px</code>, do this:</p>

<pre><code>.wrap #div3 {width:33.4%;}
</code></pre>

<p>where <code>#div3</code> is the id of the last <code>div</code> (or any of the divs, but only one).</p>


blocks|key|3000707|text|将最后一个div的宽度设置为宽度之和等于100：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3000708|.wrap+{
++++overflow:+hidden;
}
.wrap+div+{
++++width:+33.3%25;
++++float:+left;
++++background-color:+red;
}
.wrap+div:last-child+{
++++width:+33.4%25;
}|code-block|syntax|javascript|3000709|Demo|offset|length|3000710|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/salman/z4Lc6/^0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Set the width of the last div in such a way that the sum of widths equal 100:</p>

<pre><code>.wrap {
    overflow: hidden;
}
.wrap div {
    width: 33.3%;
    float: left;
    background-color: red;
}
.wrap div:last-child {
    width: 33.4%;
}
</code></pre>

<p><a href="http://jsfiddle.net/salman/z4Lc6/" rel="nofollow"><strong>Demo</strong></a></p>


blocks|key|3000712|text|通过模拟表的行为，我们可以很容易地做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3000713|html：|3000714|<div+class="wrap">
++++<div>a</div>
++++<div>b</div>
++++<div>c</div>
</div>|code-block|syntax|javascript|3000715|css：|3000716|.wrap{
++++display:+table;
++++table-layout:+fixed;
++++width:+100%25;
}
.wrap+div{
++++display:+table-cell;
++++width:+100%25;
}|3000717|请随意添加一些背景颜色和东西到.wrap+div，以检查大小。|offset|length|style|CODE|3000718|entityMap^0|0|0|0|0|0|F|9|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>By simulating the Tables behaviours we can easily achieve this:</p>

<p>html:</p>

<pre><code>&lt;div class="wrap"&gt;
    &lt;div&gt;a&lt;/div&gt;
    &lt;div&gt;b&lt;/div&gt;
    &lt;div&gt;c&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.wrap{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.wrap div{
    display: table-cell;
    width: 100%;
}
</code></pre>

<p>Feel Free to add some background color and stuff to the <code>.wrap div</code> to check the sizes.</p>


blocks|key|3543436|text|这里还有另一种使用不同修复方法的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3543437|http://jsfiddle.net/c5bR9/|offset|length|3543438|.wrap+div+{
++++float:+left;
++++width:+33.3%25;
}
.wrap+div:last-child+{
++++float:+none;
++++width:+auto;
++++margin-left:+66.6%25;
}|code-block|syntax|javascript|3543439|我曾经遇到过一些麻烦，部分百分比(主要是Internet+)计算出来的百分比大于100%25+--这意味着你的第三栏会下降。以上利用div的填充空间的自然习惯，以及自然习惯的边缘吃这种自动宽度计算。|3543440|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>Just for kicks here is another approach using a different fix:</p>

<p><a href="http://jsfiddle.net/c5bR9/" rel="nofollow">http://jsfiddle.net/c5bR9/</a></p>

<pre><code>.wrap div {
    float: left;
    width: 33.3%;
}
.wrap div:last-child {
    float: none;
    width: auto;
    margin-left: 66.6%;
}
</code></pre>

<p>I've had troubles in the past with partial percentages (mainly Internet Explorer) where they calculate to be larger than 100% &mdash; meaning your third column will drop down. The above makes use of a div's natural habit of filling up space, and the natural habit of margin to eat into this auto width calculation.</p>


<p>I have a <code>div.wrap</code> with 100% width and 3 <code>div</code> inside it.
I need the 3 <code>div</code> have the same width and could fill all the space of <code>div.wrap</code>.</p>

<p>I've tried to do something like that:
html:</p>

<pre><code>&lt;div class="wrap"&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.wrap{width:100%;position:relative;}
.wrap div{width:33.3%;float:left;}
</code></pre>

<p>But on the absolute right side, i have something like 2px blank, I need to fill all space. Does anyone know a solution for this?</p>


How can I fill all space of a div 100% with 3 divs with the same size?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个100%宽度的div.wrap，里面有3 div。我需要3 div有相同的宽度，可以填补div.wrap的所有空间。我尝试过这样做: html：<div class="wrap">    <div></div>    <div></div>    <div></div></div>css：.wrap{width...

问如何用相同尺寸的3 div填充div 100%的所有空间？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用相同尺寸的3 div填充div 100%的所有空间？EN