html - 考虑 float 元素的填充

Question

我想要一个主元素，边 block 漂浮在它的右侧。我不知道边 block 的数量，也不知道它们的最终总高度。但是我的主要元素应该具有相同的高度(请参阅以下示例以更好地理解)，而无需使用列。

(虚线部分为真实内容)

为了强制我的主要(红色)元素适应侧边 block 的高度，我使用了这个技巧:

padding-bottom: 5000px;
margin-bottom: -5000px;

这很好用，但是侧 block 不关心填充，它们只是忽略它。
我怎样才能让他们考虑填充？

注意:HTML 标记不应更改，我也不愿意使用 JS 进行布局

.container {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.main {
  float: left;
  background: tomato;
  width: 440px;
  padding-bottom: 5000px;
  margin-bottom: -5000px;
}
.side {
  float: left;
  background: forestgreen;
  height: 50px;
  width: 150px;
  margin-left: 10px;
  margin-bottom: 10px;
}

<div class="container">
  
  <div class="main">&nbsp;</div>
  
  <div class="side">&nbsp;</div>
  <div class="side">&nbsp;</div>
  <div class="side">&nbsp;</div>
  
</div>

Answer 1

这个选项怎么样？

没有标记更改和纯 CSS，已经给出的绝对值没有变化。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
}
.main {
    background: tomato;
    width: 440px;
    padding-bottom: 5000px;
    margin-bottom: -5000px;
    float: left;
}
.side {
    background: forestgreen;
    height: 50px;
    width: 150px;
    margin-left: 10px;
    margin-bottom: 10px;
    float: right;
    clear: right;
}

.side:last-child {
    margin-bottom: 0;
}

<div class="container">
    <div class="main">&nbsp;</div>
    <div class="side">&nbsp;</div>
    <div class="side">&nbsp;</div>
    <div class="side">&nbsp;</div>
</div>