考虑浮动元素的填充

Question

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

（虚线区域是真实内容）

为了强制我的主（红色）元素适合侧块高度，我使用这个技巧：

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

这很好用，但侧块不关心填充，只是忽略它。
如何让他们考虑填充？

N.B：不应该更改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

我能提出解决方案的唯一方法是：

JS FIDDLE

我在3个（森林）绿色框周围做了一个.wrapper div，并将其中一个放在右边。 所以现在你有3个盒子漂浮在番茄色的div右边。

不要忘记在浮动div下清楚，否则一切都会与div重叠。在你的CSS表中：.clear {clear：both; }

希望它有所帮助。 ：）

Answer 2

这是一个选项如何？

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

＆＃13;

＆＃13;

* {
    -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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我找到了一个解决方案，使用margin-left代替float: left：

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

.main {
  float: left;
  background: tomato;
  width: 440px;
  padding-bottom: 5000px;
  margin-bottom: -5000px;
}
.side {
  background: forestgreen;
  height: 50px;
  width: 150px;
  margin-left: 450px;
  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 4

浮动元素时，它会有效地将其从文档流中取出，因此填充不会对其产生影响。你可以使用margin-top：10px;在你的两个内部div。