时间戳

首页 > 解决方案 > 浮动元素旁边的 margin-top 出现意外结果

html - 浮动元素旁边的 margin-top 出现意外结果

问题描述

我遇到了这样的布局问题：

.wrapper {
  clear: both;
  background-color: #ccc;
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  width: 100px;
  float: left;
  background: lightblue;
}

.main {
  margin-left: 100px;
  background: lightgreen;
}
<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="box">top</div>
  </div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

和.main元素.side需要对齐。正如您在上面的代码片段中看到的，一切都很好，除非.top元素没有高度，在这种情况下，margin-top规则会导致它们倾斜。以下所有“修复”问题，但每个都有一个缺点：

.wrapper {
  clear: both;
  background-color: #ccc;
  border: 1px solid #000;
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  width: 100px;
  float: left;
  background: lightblue;
}

.main {
  margin-left: 100px;
  background: lightgreen;
}
<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

最后两个在我的代码片段中并不明显，但在现实世界的应用程序中，它们会导致这里提到的问题。

我非常怀疑这个问题与为什么如果容器元素包含浮动元素，它的高度不会增加？并且CSS 容器不会拉伸以适应浮动，但我已经尝试了许多这些建议，但似乎没有一个可以完全解决问题 - 可能是因为我的一个 div 是浮动的，而另一个不是。

由于这是一个大型应用程序的一部分，我不想彻底改变布局，只要有一些 CSS 将保持.main和.side对齐，而不管这些元素之前的内容如何。

标签： htmlcsscss-float

解决方案

您可以使用网格更优雅地做到这一点。这是网格代码：

.wrapper {
    display: grid;
    grid-template-areas:
        "top top"
        "side main";
    grid-template-columns: 100px 1fr;
}

.top{grid-area:top}
.side{grid-area:side}
.main{grid-area:main}

请注意我能够注释掉多少其他元素并仍然保持所需的布局。

.wrapper {
  /*clear: both;*/
  background-color: #ccc;
}

.wrapper+.wrapper {
  margin-top: 50px;
}

.side,
.main {
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  /*margin-top: 20px;*/
}

.box {
  padding: 10px;
}

.top {
  background: yellow;
}

.side {
  /*width: 100px;
  float: left;*/
  background: lightblue;
}

.main {
  /*margin-left: 100px;*/
  background: lightgreen;
}

.wrapper {
    display: grid;
    grid-template-areas:
        "top top"
        "side main";
    grid-template-columns: 100px 1fr;
}

.top{grid-area:top}
.side{grid-area:side}
.main{grid-area:main}
<div class="wrapper">
  <div class="top"></div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

<div class="wrapper">
  <div class="top">
    <div class="box">top</div>
  </div>
  <div class="side">side</div>
  <div class="main">main</div>
</div>

推荐阅读