blocks|key|3387457|text|发生这种情况的原因是因为50%25+x+2已经是100%25了。2像素边框使宽度为100%25+%2B4像素。要撤消此操作，请在两侧使用1px的负边距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3387458|演示：http://jsfiddle.net/rfSMX/1/|offset|length|3387459|你可能会碰到100%25+combined+width+issue+in+IE。|3387460|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rfSMX/1/|1|http://work.arounds.org/issue/61/floated-elements-combined-width-100-causes-float-d/^0|0|3|S|0|0|6|V|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

<p>The reason this happens is because 50% x 2 is already 100%. The 2 px borders make the width 100% + 4 px. To undo this, use negative margins of 1px on either sides.</p>

<p>Demo: <a href="http://jsfiddle.net/rfSMX/1/" rel="nofollow">http://jsfiddle.net/rfSMX/1/</a> </p>

<p>You may run into the <a href="http://work.arounds.org/issue/61/floated-elements-combined-width-100-causes-float-d/" rel="nofollow">100% combined width issue in IE</a>. </p>


blocks|key|4798248|text|实际上，你的div的大小是50%25+%2B2像素(每个边框一个)。因为(50%25+%2B2像素)*2比你的100%25容器宽，所以它强制浮点数换行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4798249|将-1像素边距应用到.header+div的左侧和右侧应该可以做到这一点。|4798250|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Essentially, what is happening is that your div's are sized 50% + 2 pixels (one for each border) wide.  Because (50% + 2 pixels) * 2 is wider than your 100% container, it forces the floats to wrap.  </p>

<p>Applying a -1 pixel margin to the left and right sides of your .header div's should do the trick.</p>


blocks|key|4798281|text|在div中添加一个额外的div，该div需要一个名为header-inner的边框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4798282|<style>
.header+{
++++float:left;
++++width:50%25;
}
.header-inner+{
++++padding:+10px;
++++border:+1px+solid+#ccc;
}
</style>

<div+style="width:100%25;">

++++<div+class="header"><div+class="header-inner">
++++++++Hello
++++</div></div>

++++<div+class="header"><div+class="header-inner">
++++++++World
++++</div></div>

</div>|code-block|syntax|javascript|4798283|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Add an extra div inside the divs that need a border called header-inner.</p>

<pre><code>&lt;style&gt;
.header {
    float:left;
    width:50%;
}
.header-inner {
    padding: 10px;
    border: 1px solid #ccc;
}
&lt;/style&gt;

&lt;div style="width:100%;"&gt;

    &lt;div class="header"&gt;&lt;div class="header-inner"&gt;
        Hello
    &lt;/div&gt;&lt;/div&gt;

    &lt;div class="header"&gt;&lt;div class="header-inner"&gt;
        World
    &lt;/div&gt;&lt;/div&gt;

&lt;/div&gt;
</code></pre>


blocks|key|3387572|text|这可能是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3387573|​|3387574|3387575|因为您不需要浮动第二个div，所以它应该填满第一个div之后留下的任何空间。这使您可以在添加边框的同时使边框并排齐|3387576|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|J|8|@]|9|@]|A|$]]|$1|D|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|L|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|H|$]]

<p>This could work:</p>

<p><code></p>





<p></code></p>

<p>because you don't need to float the second div it should fill up any space that is left after the first div. This allows you to add a border and still have them flush side-by-side</p>


<pre><code>&lt;style&gt;
.header {
    float:left;
    width:50%;
    border:1px solid black;
}
&lt;/style&gt;

&lt;div style="width:100%;"&gt;
    &lt;div class="header"&gt;Hello&lt;/div&gt;
    &lt;div class="header"&gt;World&lt;/div&gt; 
&lt;/div&gt;
</code></pre>

<p>I want the two inner divs to appear beside each other fitting perfectly inside the parent. This happens when there is no border set on them, but when I do set a border, the second div wraps and appears below. How do I avoid that?</p>


prevent floating divs from wrapping

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

问防止浮动div包装
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止浮动div包装EN