Css 浮动上的右div:Right在左下方显示一条线

这是我的问题

我有一个包装器div（宽度：800px，高度：250px），其中包含两个div，它们占据了所有的高度空间，并将它们的宽度一分为二

我设置了css，将右边的div浮动到float:right，这一个显示在它应该出现的地方，但“在”另一个，超过了包装器div的空间（这甚至不可能）

我正在发布JDFIDLE和代码

JS小提琴

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

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

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>

---

您应该将

float:left

添加到左侧div。

只需将ID为

rightDiv的div移动到ID为
leftDiv
的div上方即可。就这样

这是

代码：

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


这是我的标题
Lorem ipsum dolor sit amet，奉献精英

这是我的标题
Lorem ipsum dolor sit amet，奉献精英

将float:left添加到另一个div中。也可以同时使用float:left；除非您有其他原因而不是仅仅定位在那里使用它。
习惯于此代码

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

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

试试这个


您不需要将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>


这是我的标题
Lorem ipsum dolor sit amet，奉献精英

这是我的标题
Lorem ipsum dolor sit amet，奉献精英


使用类来执行常见行为是避免冗余和未来问题的良好实践

要查看您的代码在JSFIDLE上的工作情况，.
i can；我知道你可能还没有抄，但它已经被回答了。是内森，不是内森。我想当你有两个元素时，你只需要浮起一个元素就够了，我错了吗？另外，为什么绿色div超过了高度，而没有更多的内容显示？我知道溢出：hidden解决了这个问题，但我实际上认为它更简单，而且我需要一个“float”。如果你想让浮动的子元素扩展包装div（height），你应该使用“clearfix”方法（见Rohit Azad的回答）。如果div中的其他元素是内联元素，则单个浮点将非常有用。在您的情况下，有两个块级元素。所以你应该把它们都浮起来。如果这是解决方案，我不应该把float:left而不是float:right放在rightDiv上，还是把另一个浮起来？考虑到西方人的阅读习惯，将右div置于左div之前是不合逻辑的。当然感谢您提供了有效的解决方案，我只是想知道是否有更符合逻辑的方法来写下来。如果您在
leftDiv
中添加一个“float:left”，它将为
leftDiv
传递
float:left
，为
rightDiv
传递
float:right
。但是，如果您必须放置一些元素，并且不想更改css，那么按照我提到的方式进行操作是完全可以的。因为
rightDiv
有一个
float:right
和
leftDiv
只是一个具有常规特征的
div
。实际上，我可以随心所欲地更改CSS。我的工作是在一个单一的页面，干净和最低限度的布局，这一部分是完全新鲜的，没有与其他的连接，所以没有问题改变CSS结构！然后我建议您为leftDiv和rightDiv添加
float:left
。这是同样的工作解决方案@达赫内
<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>