代码之家 › 专栏 › 技术社区 › zmbq

布局错误,带有“float:left”`

css html

zmbq · 技术社区 · 6 年前

编辑:你可以在这里看到一个例子 JSFiddle .

我继承了一个旧网站,它使用的是完全没有响应性的框架。所有的事情都是手工完成的。这个网站大约一年前才开始使用,现在我需要恢复它。

在其中一页中,有四个面板应按如下方式订购:

A    B
C    D

这是用以下样式完成的:

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

直到一年前,一切都很好。但是,现在当我试图显示页面时,我会得到如下信息:

A    B
     C
D

只有当窗口足够大(缩小到70%)时,页面才会正确显示。

我试着改变 width 在CSS中,事情变得更加陌生!如预期,将宽度设置为32%会显示以下内容:

A    B     C
D

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

我被难住了,我甚至不知道如何从这里开始,除了用flexbox重做网站。

1 回复 | 直到 6 年前

Huelfe 6 年前

这是因为 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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前