6

这是我的问题。

我有一个包装器 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; }
4

6 回答 6

11

只需将带有 IDrightDiv的 div 移到带有 ID 的 div 上方leftDiv。而已。

这是工作解决方案

编码：

<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>
于 2013-07-08T11:24:53.943 回答
2

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

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

于 2013-07-08T11:24:18.387 回答
0

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

于 2013-07-08T11:25:26.653 回答
0

习惯了这个代码 

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

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

演示

于 2013-07-08T11:25:34.337 回答
0

尝试这个

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; }
于 2013-07-08T11:26:31.920 回答
0

您不需要将 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 上运行的代码，只需单击此处。

于 2013-07-08T11:31:44.447 回答