CSS浮动不同大小的div

我有一个div 2不会去波纹div 1（见图像波纹管）的小问题。我将继续这样做（更多div），并且因为我不想把它分成更小的div。任何帮助将不胜感激。CSS浮动不同大小的div

This is what it looks like now

This is what I want it to look like

.large, 
 
.small, 
 
.long-down { 
 
    float: left; 
 
    margin: 1px; 
 
} 
 
.small { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gray; 
 
} 
 
.large { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
}

<div class="wrapper"> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="large"></div> 
 
    <div class="large"></div> 
 
    <div class="large"></div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="large"></div> 
 
</div>

来源

2015-01-09 Stephen Mottershead

将包装的宽度设置为200px，因为它们都是浮动的大块将会被强制底部 - 是吗？ – 2015-01-09 21:43:14

http://jsfiddle.net/j08691/azhbeshc/ – j08691 2015-01-09 21:46:42

嗯，我有一个答案，但它分裂成两个小部分成一个自己的容器。 – 2015-01-09 21:48:03

如果你想办法解决塔t适用于任何数量和顺序的不同大小的盒子，Masonry（javascript解决方案）可能是你正在寻找的东西。

来源

2015-01-09 22:08:07 Alex

谢谢，这看起来像它可以工作，但我首先寻找更多的CSS唯一溃败。 – 2015-01-09 23:13:48

我不认为有一种方法可以实现这一点，只需使用CSS，除非您希望网格总是相同或遵循某种模式。但即使如此，如果箱子的数量足够大，这将是乏味的。 – Alex 2015-01-09 23:28:38

我的确有这种感觉。 – 2015-01-09 23:40:29

.large, 
 
.small, 
 
.long-down { 
 
    float: left; 
 
    display: block; 
 
} 
 
.small { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gray; 
 
    margin-bottom: 1px 
 
} 
 
.large { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
    float: right; 
 
    margin-top: 1px; 
 
} 
 
.wrapper { 
 
    width: 301px; 
 
} 
 
.pull-left { 
 
    width: 100px; 
 
    float: left; 
 
    margin-right: 1px; 
 
}

<div class="wrapper"> 
 
    <div class="pull-left"> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    <div class="small"></div> 
 
    </div> 
 
    <div class="large"></div> 
 
    <div class="large"></div> 
 
</div>

来源

2015-01-09 21:46:26

嗨，谢谢你的帮助。我不能将它分成不同的区域，因为我要添加更多的方块，例如小的，小的，大的，小的，小的，并且这种继续而是随机的。 – 2015-01-09 23:23:12

我认为http://masonry.desandro.com/可以帮助你。它的工作原理是根据可用的垂直空间将元素放置在最佳位置

来源

2015-01-09 22:11:17

谢谢，这看起来像它可以工作，但我首先寻找更多的CSS唯一溃败。 – 2015-01-09 23:14:33

CSS浮动不同大小的div

回答

相关问题