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

Posted 2023-03-06

【中文标题】浮动两个带有子浮动内容的 div

【英文标题】：Float two divs with child floated content

【发布时间】：2017-11-17 20:47:15

【问题描述】：

当两个 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/

【问题讨论】：

当然这是“可能的”...... “我想并排浮动我的 .region-wrp 类” - 那么也许你应该把它们放在同一个首先是水平。现在您在列内有第一个，但第二个在列之后（这里谈论的是 DOM，而不是视觉格式） - 不确定这是否是您想要的。

【参考方案1】：

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

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

https://jsfiddle.net/ebct39sw/

【讨论】：

region-wrp 可能包含 2 个元素，或者如果它包含 3，它可能包含 3，那么宽度将 100% 分为 1/3 + 1/3 +1/3。如果它包含 2 个项目，那么它将是 1/3 + 1/3 + 1/3（从第二个 region-wrp 开始）因此 region-wrp 永远不能有固定宽度，它只能是其子项的宽度。跨度>

那么你需要使用 display flex 而不是浮动或 javascript。

【参考方案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;  

【参考方案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>

【讨论】：

这是做什么的？它如何回答这个问题？不要只是脱口而出没有解释的代码。

Bootstrap 偏移类在右侧添加边距，因此如果您需要并排放置两个 div，则只需将 col-6 添加到两者并将 50% 的宽度应用于 .itme 类。