无间距垂直排列元素

如何垂直排列不同高度的元素？我的意思是用这样的：无间距垂直排列元素

div[class^="elm"]{ 
 
\t width: 50%; 
 
\t display: inline-block; 
 
\t margin-bottom: 20px; 
 
\t background-color: gray; 
 
} 
 
\t 
 
.elm1{ 
 
\t height: 100px; 
 
} 
 
\t 
 
.elm2{ 
 
\t height: 200px; 
 
} 
 
\t 
 
.elm3{ 
 
\t height: 160px; 
 
} 
 
\t 
 
.elm4{ 
 
\t height: 110px; 
 
} 
 
\t 
 
.elm5{ 
 
\t height: 60px; 
 
} 
 
\t 
 
.elm6{ 
 
\t height: 220px; 
 
} 
 
\t 
 
.elm7{ 
 
\t height: 90px; 
 
}

<div class="elm1">Element 1</div><div class="elm2">Element 2</div><div class="elm3">Element 3</div><div class="elm4">Element 4</div><div class="elm5">Element 5</div><div class="elm6">Element 6</div><div class="elm7">Element 7</div>

，并显示这个样子（顺序很重要）：

我知道这种类型的事情可以发生有两个街区。每列为一列，但它使我在在响应式设计中使用JavaScript（使其超过两列）。

示例 Google+使用JavaScript进行多块处理。我怎样才能做到这一点，而不使用JavaScript和只有CSS？

来源

2017-03-07 ICE

你可能想看看'Flexbox的' – domsson

@dom我之前曾尝试过这样的东西：http://codepen.io/klamping/pen/bddxyr?editors=110但它没有做我需要的东西:( – ICE

这不是一个石工布局吗？考虑使用砌体插件，允许您订购元素 –

这是输出你期待

这可能帮助你

Check output in Codepen.io

div[class^="elm"] { 
 
    width: 50%; 
 
    display: block; 
 
    background-color: gray; 
 
} 
 

 
.elm1 { 
 
    height: 100px; 
 
    margin: 2px; 
 
} 
 

 
.elm2 { 
 
    height: 200px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm3 { 
 
    height: 160px; 
 
    margin: 2px; 
 
} 
 

 
.elm4 { 
 
    height: 110px; 
 
    margin: 2px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm5 { 
 
    height: 60px; 
 
} 
 

 
.elm6 { 
 
    height: 220px; 
 
    margin: 2px; 
 
    position: relative; 
 
    left: 10px; 
 
    top: -105px; 
 
    float: right; 
 
} 
 

 
.elm7 { 
 
    height: 90px; 
 
    margin: 2px; 
 
}

<div class="elm1">Element 1</div> 
 
<div class="elm2">Element 2</div> 
 
<div class="elm3">Element 3</div> 
 
<div class="elm4">Element 4</div> 
 
<div class="elm5">Element 5</div> 
 
<div class="elm6">Element 6</div> 
 
<div class="elm7">Element 7</div>

来源

2017-03-07 12:57:42

感谢您的回答，但是你是我当我知道我有多少元素，哪一个去了右边，哪一个去了左边，ntioning是好的。整个想法都是关于清单的。它甚至可以超过1000个，并且在响应式设计中从两列转换为三列或更多列时，它必须是一个很好的解决方案。 – ICE

我的解决方案是解决您的问题吗？ –

您可以通过float: left和float: right之间交替做到这一点：

.items { 
 
    display: block; 
 
    overflow: hidden; 
 
    width: 400px; 
 
} 
 

 
.item { 
 
    box-sizing: border-box; 
 
    width: 190px; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    background: #000; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-family: 'Arial', 'Helvetica', sans-serif; 
 
    font-size: 48pt; 
 
    font-weight: bold; 
 
} 
 

 
.item:nth-child(odd) { 
 
    float: left; 
 
} 
 

 
.item:nth-child(even) { 
 
    float: right; 
 
} 
 

 
.elm1 { 
 
    height: 100px; 
 
} 
 
\t 
 
.elm2 { 
 
    height: 200px; 
 
} 
 
\t 
 
.elm3 { 
 
    height: 160px; 
 
} 
 
\t 
 
.elm4 { 
 
    height: 110px; 
 
} 
 
\t 
 
.elm5 { 
 
    height: 60px; 
 
} 
 
\t 
 
.elm6 { 
 
    height: 220px; 
 
} 
 
\t 
 
.elm7 { 
 
    height: 90px; 
 
}

<div class="items"> 
 
    <div class="item elm1">1</div> 
 
    <div class="item elm2">2</div> 
 
    <div class="item elm3">3</div> 
 
    <div class="item elm4">4</div> 
 
    <div class="item elm5">5</div> 
 
    <div class="item elm6">6</div> 
 
    <div class="item elm7">7</div> 
 
</div>

希望这有助于。

编辑：这仍然可能失败，这取决于瓦片的高度，因为在这里可以看到：https://jsfiddle.net/f16apso8/ - 更好的（实际）解决方案在这里的：How to Create Grid/Tile View with CSS?

来源

2017-03-07 13:14:09 domsson

谢谢你提到的第n个孩子。现在我可以对三列使用nth-child（3n + 0），对四列使用nth-child（4n + 0）。如果你喜欢把它添加到你的答案。 – ICE

太棒了！但是，请注意，如果您具有特定的元素顺序和大小（请尝试示例图片中显示的项目的确切大小），您仍然可以获得“对齐空位”。我现在不确定如何解决这个问题，说实话。 – domsson

尽管我想表扬，但这仍然是我讨论的剩余问题：https://jsfiddle.net/f16apso8/ - 我想@TomMichew是正确的，当他建议砌体布局时，请检查http： //堆栈溢出。如何创建网格平铺视图与CSS（JavaScript）和纯CSS3解决方案这里http://stackoverflow.com/questions/8470070/how-to-create-grid-瓷砖 - 视图 - 与CSS的答案＃，42614384 – domsson

无间距垂直排列元素

回答

相关问题