如何在另一個div中垂直對齊div？

Question

我想在另一個DIV中內聯顯示多個DIV元素（不同的高度）。 所有這些DIV應垂直對齊TOP。 如果您調整容器DIV的大小，那么DIV內部將轉換為新行，第二行位置從上一行中的最大DIV開始（參見圖片）：

這似乎不起作用：

.containerDiv{
    display: table-cell;
    vertical-align: top;
}

.insideDiv{
    text-align: center;
    display:inline-block;
}

Answer 1

試試這個，屏幕尺寸大於768像素，兩組div相互對齊

 *{ box-sizing:border-box; } .upperDiv{ width:20%; background-color:red; float:left; height:100px; border:1px solid black; } .upperContain{ width:100%; display:flex; margin:0; padding:0; } .lowerContain{ width:100%; display:flex; margin:0; padding:0; } .lowerDiv{ width:20%; background-color:green; height:100px; border:1px solid black; float:left; } @media (min-width:768px){ .upperContain{ width:50%; display:block; float:left; } .lowerContain{ width:50%; display:block; float:left; } } 

 <div class="upperContain"> <div class="upperDiv" style="height:50px;"></div> <div class="upperDiv" style="height:30px;"></div> <div class="upperDiv" style="height:70px;"></div> <div class="upperDiv" style="height:40px;"></div> <div class="upperDiv" style="height:10px;"></div> </div> <div class="lowerContain"> <div class="lowerDiv" style="height:50px;"></div> <div class="lowerDiv" style="height:40px;"></div> <div class="lowerDiv" style="height:20px;"></div> <div class="lowerDiv" style="height:40px;"></div> <div class="lowerDiv" style="height:10px;"></div> </div> 

Answer 2

Flexbox非常適合這種布局。 這是一個應該按照您的意圖工作的簡單示例。 小提琴 。

我假設每個盒子的高度由盒子內的內容決定。 如果要為每個框手動設置高度，則可以刪除flex-start，flex-grow和flex-basis設置。

 .container { border: 4px solid #000; display: flex; /* otherwise everything goes on one row */ flex-wrap: wrap; /* Needed as otherwise it stretches to have evenly sized boxes on each row */ align-items: flex-start; } .item { border: 4px solid #000; margin: 0.5em; /* can't use width: 150px, but in this case it acts as if we did. */ min-width: 150px; /* This is needed to prevent the boxes from dynamically resizing. */ /* alternatively: flex: 0 1 0; */ flex-grow: 0; flex-basis: 0; } 

 <div class="container"> <div class="item">Words words words words words words words words words</div> <div class="item"> words words words words words words words words words words words words words words words words words words words words words words</div> <div class="item"> words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words</div> <div class="item"> words words words words words words words</div> <div class="item">Words words words words words words words words words</div> <div class="item"> words words words words words words words words words words words words words words words words words words words words words words</div> </div> 

Answer 3

試試這個方法：

CSS：

.main-container{
    border:solid 1px #000;
    position:relative;
    display: inline-flex;
    width: 250px;
    flex-wrap: wrap;
    justify-content:center;
    padding:20px 0;
}
.secondary-div{
    border:solid 1px #000;
    width:50px;
}

HTML：

<div class="main-container">
    <div class="secondary-div" style="height:50px;">Div1</div>
    <div class="secondary-div" style="height:100px;">Div2</div>
    <div class="secondary-div" style="height:120px;">Div3</div>
    <div class="secondary-div" style="height:70px;">Div4</div>
    <div class="secondary-div" style="height:100px;">Div5</div>
    <div class="secondary-div" style="height:50px;">Div6</div>
    <div class="secondary-div" style="height:120px;">Div7</div>
    <div class="secondary-div" style="height:70px;">Div8</div>
</div>