別のdiv内のdivを垂直に揃える方法は？

Question

別のDIV内に複数のDIV要素（異なる高さ）をインラインで表示したい。これらのDIVはすべて垂直方向に一列に並べる必要があります。あなたは、コンテナDIVのサイズを変更する場合は、div要素内の新しい行を行く、2行目の位置が前の行で最大のDIV（写真参照）から開始します：

これは動作していないよう：

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

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

Answer 1

このレイアウトにはFlexboxが最適です。ここでは、意図したとおりに動作するはずの簡単な例を示します。 Fiddle。

各ボックスの高さは、ボックス内の内容によって決まるものとします。各ボックスの高さを手動で設定する場合は、フレックススタート、フレックス増加、およびフレックスベースの設定を削除できます。

.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 2

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>

と整列768 PX、画面サイズに大きく、これを試してください

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： `フロリダ州でflex`：

<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>