float:right 上的右 div 出现在左下一行答案

【问题标题】：Right div on float:right appears a line below the left onefloat:right 上的右 div 出现在左下一行
【发布时间】：2016-03-02 03:24:40
【问题描述】：

这是我的问题。

我有一个包装器 div(width: 800px and height: 250px)，其中包含两个 div，它们占据所有高度空间并将其宽度分成两半。

我设置了我的 css，将正确的 div 浮动到 float: right 并且这个出现在它应该出现的位置但“低于”另一个，超出了包装 div 空间（这甚至不应该是可能的）。

我同时发布了 jdfiddle 和代码。

JS 小提琴 http://jsfiddle.net/FV9yC/

HTML

<div id="wrapper">
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

CSS

#wrapper {
    background-color: grey;
    height: 200px;
    width: 500px; }

#leftDiv {
    background-color: purple;
    height: 200px;
    width: 250px; }

#rightDiv {
    background-color: green;
    float: right;
    height: 250px;
    width: 250px; }

【问题讨论】：

标签： css html css-float

【解决方案1】：

只需将 ID 为 rightDiv 的 div 移到 ID 为 leftDiv 的 div 上方。就是这样。

这里是WORKING SOLUTION

守则：

<div id="wrapper">
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>    
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

【讨论】：

如果这是解决方案，我不应该将 float:left 代替 float:right 放在 rightDiv 上还是浮动另一个？考虑到西方的阅读，在左边的 div 之前有右边的 div 是不合逻辑的。当然感谢您提供有效的解决方案，我只是好奇是否有更合乎逻辑的方式来写下来。
如果你在leftDiv 上加上一个'float:left'，它会为leftDiv 和float:right 传送float:left 和rightDiv。但是，如果您必须放置一些元素并且您不想更改 css，那么按照我提到的方式进行操作是完全可以的。因为rightDiv 有一个float:right，而leftDiv 只是一个具有常规特征的div。
我实际上可以随心所欲地更改 CSS。我正在做一个单页、干净和简约的布局，这部分是完全新鲜的，并且与其他部分没有联系，所以改变 CSS 结构没有问题！
那我建议你为leftDiv和rightDiv添加float:left。这是相同的工作解决方案。 jsfiddle.net/FV9yC/7 - @daghene

【解决方案2】：

http://jsfiddle.net/FV9yC/1/

您应该将float: left 添加到您的左侧 div。

【讨论】：

我认为当你有两个元素时，你只需浮动一个就足够了，我错了吗？还有为什么绿色的 div 超过了高度，而没有更多的内容可以显示？我知道溢出：隐藏解决了问题，但我实际上认为它更容易，我需要一个“浮动”。
如果您希望浮动子元素扩展包装 div（高度），您应该使用 'clearfix' 方法（请参阅 Rohit Azad 的回答）。如果 div 中的其他元素是内联元素，则单个浮点数会很有用。在您的情况下，有两个块级元素。因此，您应该将它们都浮动。

【解决方案3】：

添加 float: left 到另一个 div。你也可以使用 float: left for both;除非您有其他原因，而不仅仅是定位在那里使用它。

【讨论】：

【解决方案4】：

习惯了这个代码

        #leftDiv{float:left;}
        #wrapper:after{
            content:"";
            clear:both;
            display:table;

        }
    #wrapper {
height:200px; // remove this line
}

Demo

【讨论】：

【解决方案5】：

试试这个

http://jsfiddle.net/FV9yC/5/

#wrapper {
    background-color: grey;
    height: 200px;
    width: 500px;

}

#leftDiv {
    background-color: purple;
    height: 200px;
    width: 250px;
      float:left;

}

#rightDiv {
    background-color: green;
    float: right;
    height: 250px;
    width: 250px; }

【讨论】：

我不能复制这个答案好@Natheen Lee
我知道你可能没有复制，但已经回答了。而且是内森而不是内森。

【解决方案6】：

您不需要将您的 div 浮动到右侧 — 您只需将每个块并排对齐，您可以使用 float: left; 来做到这一点。

我为您制定了一致的解决方案。见下文：

使用类来删除代码的 DRY，我将您的块分组到具有常见行为的通用类中。

查看您的新 CSS：

#wrapper {
    background-color: grey;
    height: 200px;
    width: 500px; }

.block {
    float: left;
    width: 250px;
}

#leftDiv {
    background-color: purple;
    height: 200px; }

#rightDiv {
    background-color: green;
    height: 250px; }

还有你的新 HTML：

<div id="wrapper">
    <!-- left div -->
    <div class="block" id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <!-- right div -->
    <div class="block" id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

使用类来执行常见行为是避免冗余和未来问题的好习惯。

要查看在 jsFiddle 上运行的代码，just click here。

【讨论】：