Html 3个带浮动的div：左>；浮动问题

当所有div都有float:left时，如何显示给定的html结构

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

---

在div 1和div 3周围放置一个容器div

#容器
{
宽度：80%；
浮动：左；
}
#三
{
宽度：20%；
浮动：左；
背景颜色：蓝色；
高度：600px；
}
#一，二
{
背景颜色：绿色；
利润率：10px 10px；
高度：300px；
}

1.
2.
3

很抱歉，这个答案很模糊，但它只和你的问题一样模糊。下面是如何做到这一点的示例：

#容器{
浮动：左；
}
#d1{
宽度：200px；
高度：100px；
背景：蓝色；
}
#d2{
宽度：200px；
高度：100px；
背景：绿色；
}
#d3{
宽度：100px；
高度：200px；
背景：红色；
浮动：左；
}

我就是这样做的

div{
利润率：10px；
溢出：自动；
显示：内联；
明确：无；
浮动：左；
}
#容器{
最大宽度：390px；
显示：块；
}
#d1{
背景：红色；
宽度：200px；
高度：100px；
}
#d2{
背景：蓝色；
宽度：150px；
高度：150像素；
浮动：对；
}
#d3{
背景：绿色；
宽度：200px；
高度：150像素；
}

将需要

float:right

在第二个屏幕上，您是否搜索简单解决方案以进行简单填充？这只会创建3个div，而不是指定的格式堆叠在一列中。css甚至不会影响分区。你能将此解决方案缩放为7个不同高度的分区吗？我不太确定，试一试，看看它是如何工作的，并影响显示效果。把上面的代码复制到codepen，看看它是怎么运行的。7只是一个数字。。我只是想，是否有任何纯CSS解决方案，以填补任何（dinamic可变）的差异数量的屏幕。。。这是另一个问题：）可悲的是，我不认为会有，除非你对css的运行非常有创意，并且确切地知道每个div将有多大，等等，这些都不会很好地运行。你最好的选择是坚持JS的运行方式，比如说通过masonryJS（）