时间戳

首页 > 解决方案 > 如何修复：2 DIV 左浮动不工作

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

问题描述

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

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

标签： htmlcssimagecss-floatmultiple-columns

解决方案

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

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

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

推荐阅读