浮动两个带有子浮动内容的 div

Question

当两个 div 的子内容包含浮动元素时，是否可以并排浮动两个 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

当然可以。你只需要像给孩子们（30%）一样给他们一个宽度（比如每个50%）。只是不要像这样使用“width：auto”，它将100％作为块元素并且它们不会“浮动”

.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

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