时间戳

首页 > 解决方案 > `float:left` 布局错误

html - `float:left` 布局错误

问题描述

编辑：您可以在此JSFiddle中看到一个示例。

我继承了一个完全不使用响应式框架的旧网站。一切都是手工完成的，它显示出来了。该网站直到大约一年前才开始使用，现在我需要恢复它。

在其中一页中，有四个面板应按如下顺序排列：

A    B
C    D

这是通过以下样式完成的：

.panel-container {
   float: left;
   width: 48%;
   text-align: center;
   margin-bottom: 2%;
}

直到一年前，一切都很好。但是，现在当我尝试显示页面时，我得到如下信息：

A    B
     C
D

只有当窗口足够大（通过缩小到 70%）时，页面才能正确显示。

我尝试更改widthCSS 中的 ，事情变得更奇怪了！正如预期的那样，将宽度设置为 32% 会显示以下内容：

A    B     C
D

将宽度设置为大于 33% 会导致布局出现问题。

我很困惑，我什至不知道如何从这里开始，除了用 flexbox 重做网站。

标签： htmlcss

解决方案

发生这种情况是因为您A的身高较高：

.panel-container {
  float: left;
  width: 48%;
  text-align: center;
  margin-bottom: 2%;
  height: 100px;
}

.bigger {
  height: 200px;
}

.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
<div class="clearfix">
  <div class="panel-container bigger">
  A
  </div>
  <div class="panel-container">
  B
  </div>
  <div class="panel-container">
  C
  </div>
  <div class="panel-container">
  D
  </div>
</div>
<hr />
<div class="clearfix">
  <div class="panel-container">
  A
  </div>
  <div class="panel-container">
  B
  </div>
  <div class="panel-container">
  C
  </div>
  <div class="panel-container">
  D
  </div>
</div>

您可以简单地clear为奇数项添加一个：

.panel-container {
  float: left;
  width: 48%;
  text-align: center;
  margin-bottom: 2%;
  height: 100px;
}

.panel-container:nth-child(odd) {
  clear: both;
}

.bigger {
  height: 200px;
}

.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
<div class="clearfix">
  <div class="panel-container bigger">
  A
  </div>
  <div class="panel-container">
  B
  </div>
  <div class="panel-container">
  C
  </div>
  <div class="panel-container">
  D
  </div>
</div>

推荐阅读