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

Question

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

这是实时网站：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 个包。

Answer 1

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

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

基本上，浮动将元素从父级的自然流中取出，因此将此 "forces" 添加回其 "normal" 大小。

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

How to fix: 2 DIV with float left not working

html

css

image

multiple-columns

css-float