1

オンライン div を使用して行列に div を表示しようとしています。ここは同じです

https://jsfiddle.net/sreeram62/b5d3s/1/

以下同じです。

 <style>

*{
    margin:0px;
    padding:0px;
}
.changed{
    display:inline-block;
    vertical-align:top;
}


</style>
</head>

<body>
<div style="border:1px solid #F00; width:900px; min-height:1000px">
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:20px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:37px;"></div>
  <div class="changed" style="width:220px; margin:3px; border:1px solid #0C0; height:30px;"></div>


</div>

最初の行の 2 番目の div が小さいため、5 番目の div (2 番目の行の 2 番目) を表示する必要がありますが、2 番目の行全体が同じ垂直線から始まります。

4

3 に答える 3

2

What your trying to do is not possible with just CSS.

That picture you are showing is what the plugin Masonry is for. https://masonry.desandro.com/

于 2013-05-23T14:48:10.040 に答える
0

列を使用してレイアウトを注文すると、うまくいくはずです。

<div class="column">
  <!-- your content here -->
</div>

関連する css を使用:

.column { display: inline-block; width: 100px; vertical-align: top; }

ここでフィドルを更新しました：https://jsfiddle.net/b5d3s/3/

于 2013-05-23T16:50:20.093 に答える