どのようにしてフロートを使って区域を区切ることができますか？

Question

SharePoint WebサイトのBootstrap行と列に苦労しています。問題は、SharePointから始まったスタイリングを変更したくないということですが、ページの一部でもブートストラップグリッドを使用できることです。

BootstrapとSharePointを使用しないで問題を説明しようとしました。ここでJSFiddleだ：以下

https://jsfiddle.net/knLjyhe4/

私の例の完全な説明図です。問題は、C、D、Eから要素Bを分離するために行を使用すると、サイド要素Aの高さが最初の行の高さに影響することです。これは望ましくありません。 2番目の例はdiv.row要素を追加する前の様子です。以下は

孤立例えばHTMLとCSSです。私は、Aの浮動小数点がB-Eの浮動小数点に全く影響しないようにdiv.main要素を何らかの形でスタイルすることができることを期待していました。しかし、私はそれを理解することはできません。

HTMLとスタイル（ポジションを使用するなど）を変更するにはいくつかの解決策がありますが、実際にCSSにdiv.main要素があるかどうかを知りたいAエレメントのフロートの影響を受けずに、 "独自の"浮動小数点を取得します。

<style> 
 
    section { 
 
    width: 600px; 
 
    margin: auto; 
 
    } 
 
    .block { 
 
    float: left; 
 
    margin: 10px; 
 
    background-color: #339; 
 
    color: #fff; 
 
    width: 140px; 
 
    padding: 10px; 
 
    } 
 
    .side { 
 
    width: 200px; 
 
    height: 100px; 
 
    } 
 
    .main { 
 
    margin-left: 240px; 
 
    } 
 
    .row:after { 
 
    display: table; 
 
    content: ' '; 
 
    clear: both; 
 
    } 
 
</style> 
 
<section> 
 
    <div class="side block">This is element A in problematic example. I want element C immediately below element B, regardless of the height of this element</div> 
 
    <div class="main"> 
 
    <div class="row"> 
 
     <div class="block">This is element B</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="block">This is element C</div> 
 
     <div class="block">This is element D</div> 
 
     <div class="block">This is element E</div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section> 
 
    <div class="side block">This is element A when it works but without rows</div> 
 
    <div class="main"> 
 
    <div class="block">This is element B</div> 
 
    <div class="block">This is element C</div> 
 
    <div class="block">This is element D</div> 
 
    <div class="block">This is element E</div> 
 
    <div class="block">This is element F</div> 
 
    <div class="block">This is element G</div> 
 
    <div class="block">This is element H</div> 
 
    <div class="block">This is element I</div> 
 
    </div> 
 
</section>

Answer 1

が動作しているようだ：

.main { 
    margin-left: 240px; 
    display: table-row; 
} 

更新JSFiddle here

それがなかったので、UPDATE 1

がtable-rowにtableを変更しましたIE10では動作しません。今後の参考のために

UPDATE 2

、SharePointの/ O365に使用される最終的な解決策はthisのようなものを見て：

HTML（.containerがブートストラップコンテナです）

<div id="DeltaPlaceHolderMain"> 
    <div class="container"> 
     <div class="inner-container"> 
      <!--Your content here--> 
     </div> 
    </div> 
</div> 

CSS

.container .inner-container { 
    display: inline-block; 
    width: 100%; 
} 

Answer 2

.mainはフロートする必要があります：左、それは幅に少ないピクセルを持っている必要があります。

てみ

.side {width:30%; float:left;} 
    .main{width:70%; float:left; margin-left:0; } 

はマージン左.main

Answer 3

のrow:after疑似クラスのclear: bothプロパティは2番目の行は左浮かべ下にダウンジャンプする原因になっているをきれいにすることを忘れないでください定義しますside要素。

は、ブートストラップでは、あなたのmain要素であなたのside要素、クラス名col-md-8上のクラス名col-md-4を使用する必要がありますし、あなたのside要素からfloat: leftプロパティを削除します。これは2列、sideは4つのグリッド、もう1つはmain（8グリッド幅）です。フロートが消えたら、あなたの行は期待どおりに機能するはずです。

<style> 
    section { 
    width: 600px; 
    margin: auto; 
    } 
    .block { 
    background-color: #339; 
    color: #fff; 
    padding: 10px; 
    } 
</style> 

<section class="row"> 
    <div class="block col-md-4">This is element A</div> 
    <div class="col-md-8"> 
    <div class="row"> 
     <div class="block col-md-6">This is element B</div> 
    </div> 
    <div class="row"> 
     <div class="block col-md-6">This is element C</div> 
     <div class="block col-md-6">This is element D</div> 
     <div class="block col-md-6">This is element E</div> 
    </div> 
    </div> 
</section> 

一般に、ブートストラップでは物事を浮かべたくありません。また、要素幅を明示的に設定する代わりに、.col-クラスを使用してブートストラップグリッドシステムに適合させる方が良いでしょう。あなたはこれまで.main（display: table-row;）のためにあなたのCSSを変更した場合