1

基本的に、div の左端の領域に 2 つの異なる要素が必要で、div の右端の領域に 2 つの要素が必要です。

ただし、float:left と float:right を 2 回使用すると、次のようになります。

   ELEMENT                                   ELEMENT

          ELEMENT                     ELEMENT

それよりも

   ELEMENT                                    ELEMENT

   ELEMENT                                    ELEMENT

これは、2 回目にフロートすると、CSS が残りのスペースのためにフロートするためです。

このバグを修正するにはどうすればよいですか?

4

5 に答える 5

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>

于 2012-12-29T04:15:55.260 に答える
0

こちらをご覧ください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>

ここに画像の説明を入力

于 2012-12-29T04:42:55.343 に答える
0

必要なのはclear: bothCSS の a です。

フロートは正常に機能していますが、次の要素を最初の要素の下にプッシュするのに十分なコンテンツがありません。それらを に設定すると、そうclearなります。

于 2012-12-29T04:11:25.030 に答える
0
于 2012-12-29T04:14:13.670 に答える
0

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.

于 2012-12-29T04:19:37.427 に答える