css 带浮动的自定义网格[重复]

hwamh0ep 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(148)

此问题在此处已有答案：

Why the CSS calc() function is not working? [duplicate]（1个答案）
4天前关闭。
为什么我的div在block中不是并排的layout with floats？据我所知，block layout占据了整个宽度（我也尝试了inline-block和inline，但没有像预期的那样工作，display：flex可以工作）。但是对于float，我相信它会离开block并折叠父高度（我使用了clear）。只是想知道如何使用floats并排获得这些div。

.row {
  max-width: 1440px;
  margin: 0 auto;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.col-1-2 {
  background-color: red;
  width: calc((100%-50px)/2);
  float: left;
}

.col-1-2:not(last-child) {
  margin-right: 50px;
}

<body>
  <div class="row">
    <div class="col-1-2"> col 1 of 2</div>
    <div class="col-1-2"> col 1 of 2</div>
  </div>
</body>

See CodePen

css

来源：https://stackoverflow.com/questions/75852486/custom-grid-with-floats

1条答案

按热度按时间

oprakyz71#

你差不多就到了，这只是一个语法问题正如Gerard所说，你需要：last-child你还需要在你的calc中放空格我在代码片段中添加了一个clearfix类，你可以在任何项目中使用这个类

.row {
  max-width: 1440px;
  margin: 0 auto;
}

.col-1-2 {
  background-color: red;
  width: calc((100% - 50px) / 2);
  float: left;
}

.col-1-2:not(:last-child) {
  margin-right: 50px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

<div class="row clearfix">
  <div class="col-1-2"> col 1 of 2</div>
  <div class="col-1-2"> col 1 of 2</div>
</div>

赞(0）回复(0）举报 2023-04-01

我来回答

css 带浮动的自定义网格[重复]

1条答案

相关问题

热门标签

最新问答