右浮动浮动：右出现在左下一行

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

我建立了我的css，将右边的div浮动到右边，这个出现在它应该但在另一个“下面”的地方，超出了包装div空间（甚至不应该是可能的）。

我发布了jdfiddle和代码。

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

来源

2013-07-08 daghene

只需将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>

来源

2013-07-08 11:24:53 Nitesh

如果这是解决方案，我不应该把float：left而不是float：right在右边或者浮动另一个？考虑到西方人的阅读，在左边之前有正确的div是不合逻辑的。谢谢你，当然对工作的解决方案，我只是好奇，如果有将它记下来一个更合乎逻辑的方式。 – daghene

如果你把一个“浮动：左”你'leftDiv'，它会传达'浮动：left'为'leftDiv'和'浮动：right'为'rightDiv'。但是如果你必须放置一些元素而你不想改变CSS，那么按照我提到的方式来完成就好了。由于'rightDiv'有一个'float：right'，'leftDiv'只是一个具有常规特征的'div'。 – Nitesh

我实际上可以根据需要更改CSS。我正在研究单页，干净和简约的布局，这一部分是全新的，并且与其他部分没有关联，因此改变CSS结构没有任何问题！ – daghene

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

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

来源

2013-07-08 11:24:18

我认为，当你有两个元素，你静静地飘浮之一，这就够了，是我错了？此外，为什么绿色div超过高度，而没有更多的内容可以显示？我知道一个溢出：隐藏解决了这个问题，但我实际上认为它更容易，我需要一个“浮点”。 – daghene

如果你想浮动的子元素扩展包装div（高度），你应该使用'clearfix'方法（请参阅Rohit Azad的答案）。如果div中的其他元素是内联元素，则单个float将会很有用。在你的情况下，有两个块级元素。因此你应该把它们都浮起来。 –

谢谢，现在很清楚！ – daghene

添加浮动：左到其他分区。你也可以使用float：left;除非你有其他的原因，除了定位在那里使用它。

来源

2013-07-08 11:25:26 zozo

习惯了这种代码

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

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

Demo

来源

2013-07-08 11:25:34

试试这个

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-08 11:26:31 falguni

我可以;吨复制这个答案OK @ Natheen李 – falguni

我知道你可能没有复制，但已经回答了。 Nathan不是Natheen。 – Nitesh

呦你不需要将你的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你的代码。

来源

2013-07-08 11:31:44

右浮动浮动：右出现在左下一行

回答

相关问题