浮动两个div与孩子浮动的内容

Question

当他们的子内容包含浮动元素时，没有javascript可以并排浮动两个div吗？我希望将.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

当然可以。你只需给他们一个宽度（每个50％）就像你对孩子们一样（30％）。只是不要使用＆＃34; width：auto＆＃34;好像是这样，它将需要100％作为一个块元素，他们赢了“＃＆＃34;漂浮＆＃34;

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

https://jsfiddle.net/ebct39sw/

Answer 2

你需要设置margin-left：auto和margin-right：auto，宽度为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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;