フロート2つのdiv要素は、コンテンツ

Question

が、それは彼らの子供の内容が浮かん要素が含まれている場合の側で2つのdiv要素側をフロートするjavascriptをせずに可能です浮かべ？私は側で私の.region-wrpクラス側をフロートにしたいです。

.region-wrp

は1と10の間の子供の数を有することができるので、このクラスは、一定の幅を持つことができません。したがって、このクラスは子どもの幅を占めることが重要です。

.col-md-8 { 
 
    border: 1px solid blue; 
 
} 
 

 
.region-wrp { 
 
    border-top: 1px dashed red; 
 
    float: left; 
 
    display: inline-block; 
 
    width: auto; 
 
} 
 

 
.clear { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.item { 
 
    width: 30%; 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2"> 
 
     <div class="region-wrp"> 
 
     <div class="item"> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend mauris in erat facilisis, eleifend accumsan nisi eleifend. Pellentesque nec fermentum enim. Praesent bibendum ex condimentum, rhoncus diam non, gravida ex. 
 
      </p> 
 
     </div> 
 
     <div class="item"> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend mauris in erat facilisis, eleifend accumsan nisi eleifend. Pellentesque nec fermentum enim. Praesent bibendum ex condimentum, rhoncus diam non, gravida ex. 
 
      </p> 
 
     </div> 
 
     <div class="clear"></div> 
 
     </div> 
 
    </div> 
 
    <div class="region-wrp"> 
 
     <div class="item"> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend mauris in erat facilisis, eleifend accumsan nisi eleifend. Pellentesque nec fermentum enim. Praesent bibendum ex condimentum, rhoncus diam non, gravida ex. 
 
     </p> 
 
     </div> 
 
     <div class="clear"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

JSFiddle - https://jsfiddle.net/nfc6458w/3/

編集 - 私はなし高さでこれを持って、あなたができるもちろん、より良いデモ https://jsfiddle.net/nfc6458w/14/

Answer 1

である可能性があります。あなたはちょうどあなたが子供たちに行ったように、彼らに（30％）（それぞれ50％などの）幅を与える必要があります。ただ、「幅：auto」で使用していないそうかのように、それはブロック要素として100％がかかりますし、彼らは「フロート」あなたは余裕左を設定する必要が

.region-wrp{ 
    border-top: 1px dashed red; 
    float:left; 
    display: inline-block; 
    width: 50% ; 
} 

https://jsfiddle.net/ebct39sw/

Answer 2

しません：autoとmargin-right：それぞれが半分になるので50％の幅の自動。

JSFiddle例： "可能" である。もちろん、https://jsfiddle.net/mikeferrari/37bdaper/

.region-wrp { 
border-top: 1px dashed red; 
margin-left: auto; 
margin-right: auto; 
display: block; 
width: 50%; 
float: left; 
} 

.item { 
float: left; 
} 

Answer 3

.col-md-8{ 
 
    border: 1px solid blue; 
 
} 
 

 
.region-wrp{ 
 
    border-top: 1px dashed red; 
 
    float:left; 
 
    display: inline-block; 
 
    width: auto; 
 
} 
 
.clear{ 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.item{ 
 
    width: 50%; 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-sm-6"> 
 
     <div class="region-wrp"> 
 
     <div class="item"> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend mauris in erat facilisis, eleifend accumsan nisi eleifend. Pellentesque nec fermentum enim. Praesent bibendum ex condimentum, rhoncus diam non, gravida ex. 
 
      </p> 
 
     </div> 
 
     <div class="item"> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend mauris in erat facilisis, eleifend accumsan nisi eleifend. Pellentesque nec fermentum enim. Praesent bibendum ex condimentum, rhoncus diam non, gravida ex. 
 
      </p> 
 
     </div> 
 
     <div class="clear"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6"> 
 
     <div class="region-wrp"> 
 
     <div class="item"> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend mauris in erat facilisis, eleifend accumsan nisi eleifend. Pellentesque nec fermentum enim. Praesent bibendum ex condimentum, rhoncus diam non, gravida ex. 
 
      </p> 
 
     </div> 
 
     <div class="clear"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>