Question

很难解释我的问题是什么，我试图谷歌搜索并在这里搜索问题。我找不到任何人有同样的问题。我希望我的div安排像Google Keeps笔记本。所有div应该在彼此之间和之间，只有边缘之间没有空格。为了理解我的意思，我在JSFiddle中发布了一个图像（我没有权利在这里发布图像）。

.col {
    display: inline;
    width: 200px;
    border: 1px solid red;
    margin: 5px;
    vertical-align: top;
}

<div class="col">Some content...</div>
<div class="col">Some content...</div>
<div class="col">Some content...</div>
<div class="col">Some content...</div>
<div class="col">Some content...</div>

http://jsfiddle.net/5t6tm/14/

Answer 1

.col {
display: inline-block;
width: 200px;
border: 1px solid red;
margin: 5px;
vertical-align: top;
float: left;
}



    <div class="col">Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content...</div>
<div class="col">Some content... Some content... Some content... Some content...</div>
<div class="col">Some content... Some content... Some content... Some content...</div>
<div class="col">Some content...</div>
<div class="col">Some content... Some content... Some content...</div>
<div class="col">Some content... Some content... Some content...</div>
<div class="col">Some content... Some content... Some content...</div>

Answer 2

我过去没有使用javascript就能实现这一目标。

你可能想看看Masonry，它是一个jquery插件，几乎完全符合你的要求。

http://masonry.desandro.com

或者，您可以考虑使用多个div列，每个列都有明确的宽度并向左或向右浮动？

.column {
    width: 50%;
    float: left;
}

<div class="column">
    <div class"item">Lorem ipsum</div>
    <div class"item">Lorem ipsum</div>
    <div class"item">Lorem ipsum</div>
</div>
<div class="column">
    <div class"item">Lorem ipsum</div>
    <div class"item">Lorem ipsum</div>
</div>

这可能是一个可接受的解决方案，虽然它会影响您的语义和响应能力。

彼此相邻

2 个答案: