如何修复：2 DIV 左浮动不工作答案

【问题标题】：How to fix: 2 DIV with float left not working如何修复：2 DIV 左浮动不工作
【发布时间】：2019-08-25 11:17:15
【问题描述】：

我有主要部门：面板主体和内部部门：包我的包裹正确地显示在面板体内，它们成排堆叠。

这是实时网站：https://royalkingdom.net/store/?cat=1

我已经尝试添加到我的包中：float:left;，但是当我这样做时，这些包不会进入正文。

如果我删除 float:left; 它可以工作，但它们不是每行 3 个

我的包css：

.package {
    width: 33.33333333%;
}

我的面板主体 css：

.panel {
    margin-bottom: 30px;
    background: url(https://castiamc.com/buycraft/bordersv2/Middle.png);
    width: 850px;
    border: none;
    border-radius: 0;
    position: relative;
    min-height: 300px;
    padding: 20px;
    color: #fff;
}
.panel-body {
    padding: 15px;
    text-align:justify;
}
.panel .panel-body {
    color: #3d3e3f;
    box-sizing: border-box;
    position: relative;
    max-width: 750px;
    top: -75px;
    left: 13px;
}

<div class="package">
<img src="'.(isset($image) && $image!="" && ($it == 1 || $it == 3 || $it == IMG_JPEG) ? $image : "img/404.jpg").'" class="img-rounded img-responsive" style="width:250px; height:168px;">
</div>

我希望在面板主体内每行显示 3 个包。

【问题讨论】：

标签： html css image css-float multiple-columns

【解决方案1】：

在包的父级上，添加一个名为clearfix 的附加类并在您的样式表中定义该类：

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

基本上，浮动将元素从父级的自然流中取出，因此添加这个“强制”它回到它的“正常”大小。

【讨论】：

我不确定是否理解：/ 所以我使用我的 ``` .package { width: 33.33333333%; } ``` 并添加 ``` .clearfix:after { content: " ";显示：块；明确：两者； ``` 并将其保存在我的 html 中？ ```

```跨度>
您在浮动的父上添加 clearfix 类。因为您要添加一个清除浮动的额外元素（after），所以父 div 将拉伸以适应它。