私は写真のように、フローティングDIVのCSSでこの問題を解決するにはどうすればよい

Question

：私の場合は

、DIV-秒後赤いDIVそれを浮かべることはありません。

私はこのフォームでのdivを作成しました：

<div class="outer"> 
    <div class="col-lg-6 col-sm-12 col-md-6"> 
    </div> 
    <div class="col-lg-6 col-sm-12 col-md-6"> 
    </div> 
    <div class="col-lg-6 col-sm-12 col-md-6"> 
    </div> 
    <div class="col-lg-6 col-sm-12 col-md-6"> 
    </div> 
    <div class="col-lg-6 col-sm-12 col-md-6"> 
    </div> 
</div> 

Answer 1

あなたはこのように、別々のdivタグに左右のサイドを包むことができます：

編集：更新された質問の例を更新しました。スタックスニペットをフルスクリーンで見る必要があるかもしれません。

*編集2：jsfiddle（https://jsfiddle.net/6z4orL6b/）で動作していたのはなぜですか、私はスニペットを何らかの作業環境に変更するのではなく、ここで何も変更しないことにしました。代わりに、私は説明します、なぜこれが起こるか。 JSFiddleでは、以下のカスタムCSSがBootstrapのCSSの後に適用され、Cascading Stylesheetと呼ばれるので、カスタムスタイルはBootstrapによって上書きされます。 一方、jsfidlleでは、Bootstrap CSSが最初に適用されるため、この例ではカスタム行がブートストラップCSSを上書きして動作します。

誰かがコメントで私に説明することができたら、なぜブートストラップfloat: leftのステートメントが機能しませんが、カスタムfloat: left;が実際にはうまくいくでしょう。

.blue { 
 
    border: 10px solid #fff; 
 
    background: blue; 
 
    height: 150px; 
 
    float: left; 
 
} 
 

 
.red { 
 
    border: 10px solid #fff; 
 
    background: red; 
 
    height: 300px; 
 
    float: right; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    .red, .blue { 
 
     float: none; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="outer"> 
 
    <div class="col-lg-6 col-sm-12 col-md-6 blue"> 
 
    </div> 
 
    <div class="col-lg-6 col-sm-12 col-md-6 blue"> 
 
    </div> 
 
    <div class="col-lg-6 col-sm-12 col-md-6 blue"> 
 
    </div> 
 
    <div class="col-lg-6 col-sm-12 col-md-6 red"> 
 
    </div> 
 
    <div class="col-lg-6 col-sm-12 col-md-6 blue"> 
 
    </div> 
 
</div>

Answer 2

ジャストパラメータCSSスタイルで使用します。

<div style="float: inside"></div> 

あなたはパラメータのいずれかがあなたのためのより良いスーツfloat:に入れることができます。

Answer 3

あなたはStackOverflowのにこのHTML

<div class="outer"> 
<div c3ass="row"> 
    <div class="col-lg-6 col-sm-12 col-md-6" style="background-color:red;height:100px;border:1px solid black;"> 
    </div> 
    <div class="col-lg-6 col-sm-12 col-md-6" style="background-color:red;height:100px;border:1px solid black;"> 
    </div> 

</div> 
<div class="row"> 

<div class="col-lg-6 col-sm-12 col-md-6"> 
<div class="row"> 
<div class="col-lg-12 col-sm-12 col-md-12" style="background-color:red;height:100px;border:1px solid black;"> 

</div> 
<div class="col-lg-12 col-sm-12 col-md-12"style="background-color:red;height:100px;border:1px solid black;" > 

</div> 
</div> 
</div> 
<div class="col-lg-6 col-sm-12 col-md-6"> 
<div class="row"> 
<div class="col-lg-12 col-sm-12 col-md-12" style="background-color:pink;height:200px;border:1px solid black;"> 

</div> 
</div> 
</div> 
</div> 


</div>