如何左右浮动两次？

Question

基本上，我想在div的最左边区域中有两个不同的元素，而在div的最右边区域需要两个元素。

但是如果我使用float：left和float：右两次，我得到以下内容：

   ELEMENT                                   ELEMENT

          ELEMENT                     ELEMENT 

而不是

   ELEMENT                                    ELEMENT

   ELEMENT                                    ELEMENT

这是因为，当我第二次浮动时，css会浮动剩下的剩余空间。

如何修复此错误？

Answer 1

您可以将clear:both;与float:left;属性一起使用。

尝试 Jsbin 演示

.left {
   float:left;
   width:40%;
   height:240px;
   border:1px solid red;
}

.right {
   float:right;
   width:40%;
   border:1px solid red;
   height:240px;
} 

.elem1 {
   float:left;
   margin-bottom:20px;
}

.elem2 {
   float:left;
   clear:both;
}

.elem3 {
   float:left;
   margin-bottom:20px;
}

.elem4 {
   float:left;
   clear:both;
}

<div class="left">
    <div class="elem1">element 1</div>
    <div class="elem2">element 2</div>
 </div>
 <div class="right">
    <div class="elem3">element3</div>
    <div class="elem4">element4</div>
</div>

Answer 2

您需要的是CSS中的clear: both。

您的花车工作正常，但没有足够的内容来推动第一个元素下面的下一个元素。如果您将它们设置为clear，那么它们将会。

Answer 3

这适合我。

.right {
    float:right;
} 

.left {
    float:left;
}​

<div>
    <div class="right">1 element</div>
    <div style="clear:both"></div>
    <div class="right">1 element</div>

    <div class="left">1 element</div>
    <div style="clear:both"></div>
    <div class="left">1 element</div>
</div>

这是小提琴。 http://jsfiddle.net/nQvEW/143/

Answer 4

试试这个：

标记：

 <div class='clear:both'>
    <!-- left container -->
    <div style = "float:left;">
     <div style = "float:left;">
       Element
     </div>
     <div style = "float:left; clear:left;">
       Element
     </div>    
    </div>
   <!-- right container -->
   <div style = "float:right">
   <div style = "float:right;">
      Element
     </div>
   <div style = "float:right; clear:right;">
     Element
    </div>
</div>

请使用您自己的外部风格，这只是为了指导您。

Answer 5

请在jsfiddle

上查看here

.wrapper {
   height:100px;
   border:1px solid red;
   margin: 5px;  
}

.left {
   margin: 10px;    
   float:left;
   width: 45%;    
}

.right {
   margin: 10px;
   float:right;
   width: 45%;
}

<div class="wrapper">
    <div class="left">element 1</div>
    <div class="right">element 2</div>
</div>
<div class="wrapper">
    <div class="left">element3</div>
    <div class="right">element4</div>
</div>