html - 如何向左或向右浮动两次？

Question

基本上，我想在 div 的最左侧区域使用两个不同的元素，在 div 的最右侧区域使用两个。

但是，如果我使用 float:left 和 float:right 两次，我会得到以下信息：

   ELEMENT                                   ELEMENT

          ELEMENT                     ELEMENT 

而不是

   ELEMENT                                    ELEMENT

   ELEMENT                                    ELEMENT

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

如何修复此错误？

Answer 1

You can use clear:both; with float:left; property.

Try Jsbin demo

.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

你需要的是clear: both在你的 CSS 中。

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

Answer 3

Answer 4

Try this one:

Markup:

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

Please use your own external style, this is just to guide you.

Answer 5

Please have a look here on jsfiddle

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