css - float 两个带有子 float 内容的 div

Question

当两个 div 的子内容包含 float 元素时，没有 javascript 是否可以并排 float 它们？我想并排 float 我的 .region-wrp 类。

.region-wrp 可能有 1 到 10 之间的多个 child ，所以这个类不能有固定的宽度。所以这个类只占用它的 child 的宽度是很重要的。

.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%)，就像你给 children 做的那样(30%)。只是不要像这样使用“width: auto”，它将 100% 作为 block 元素并且它们不会“ float ”

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

https://jsfiddle.net/ebct39sw/