Question

我需要构建这样的东西：https://youtu.be/-pv77UW1w6g 但我面临的问题是并排设置div而它们之间没有空格。

我做了一个线框来帮助显示我的想法，如上面的视频：https://dl.dropboxusercontent.com/u/9095670/multiple-divs.jpg

说我使用bootstrap并且它是一个响应式项目很重要。所以，我不想使用固定宽度或高度（如果可能）来做到这一点。我尝试过使用display：inline，但由于固定的最小高度，我在它们之间有很多洞。

非常感谢你的帮助。

Answer 1

问题在于你的标记可能在元素之间有空格，避免这种情况的最简单方法是设置font-size：0px;在文档正文中，然后为每个子div添加一个类，它将字体大小重新设置为您想要的任何内容。

Answer 2

这样做：

<div class="wrap">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
</div>

http://codepen.io/damianocel/pen/PPEqJm

Answer 3

好的，你去吧。你可以注释掉关键帧，但我已经放了一点动画，你的视频让我:-)。要解释一下......如你所见，div上没有高度声明，只在主包装div上。并在img标签上，用于演示目的。正如您所看到的那样，div会根据放入其中的内容来调整高度对于图片，您可以将它们设置为您想要的尺寸。使用flexbox布局，我将div放置为列，即垂直放置。主div上有一个高度声明，如果你想像这样显示它，你需要这个，但只有这一个，在主div上没有高度，flexbox永远不会创建下一列，它只会叠加一个在接下来的。
这样，一旦达到高度，它就会创建一个新的水平柱。这在其他方面也是可能的，并且需要对flexbox模型有所了解，看看它，我认为这是布局的未来。你在子类上设置一个宽度，我在这里设置为30％，3行（flex仍会创建第4个，第5个等，但是这些会从包装div中掉出来，因此，需要进行一些计算你的角色。
玩它并看看如果你改变子类宽度会发生什么，或者在其中放入更多/更少的文本，小心边距，flexbox的边距有点奇怪，但这超出了这里的范围。当flexbox创建一个新行时不要害怕，当它看起来很奇怪时不要尝试用边距修复它（新的或od行有间隙等，你会看到我的意思）。而且这将是完全响应的。

* {
box-sizing: border-box;
}

@keyframes bro{
1% {transform: skew(5deg, 6deg);}
25%  {transform: skew(10deg, 5deg);}
75%  {transform: skew(15deg,9deg);}
90% {transform: rotate(720deg) scale(0.1);}
}

http://codepen.io/damianocel/pen/PPEqJm

如果您有任何疑问，请随时询问。

Answer 4

感谢您的帮助，但Masonry解决了hungerstar问题。The Table说。如果你也在使用Angular.js，那么砌体很好。

如何并排设置多个div，它们之间没有空格

4 个答案: