Question

这是我的问题。

我有一个包装div（宽度：800px，高度：250px），它包含两个占用高度所有空间并将宽度分成两半的div。

我设置了我的css，将右边的div浮动到浮动：右边，这一个出现在它应该的位置，但是在另一个下方，超出了包装div空间（甚至不应该是可能的）。

我发布了jdfiddle和代码。

JS Fiddle 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; }

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

Answer 2

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

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

Answer 3

将float：left添加到另一个div。你也可以使用float：left;除非你有其他原因而不仅仅是定位使用它。

Answer 4

用于此代码

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

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

<强> Demo

Answer 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; }

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

浮动右侧div：右侧左侧下方显示一条线

6 个答案: