複数のdiv内のh2タグの垂直方向の整列

Question

親divと複数の子divがあります。私は各h2タグのトップを同じにしたいと思います。今はそうではありません。

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;"> 
    <div style="display:inline-block;vertical-align:middle"> 
    <div style="float:left;top:0"><h2>L2</h2></div> 
    gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd 
    </div> 

    <div style="display:inline-block;vertical-align:middle"> 
    <div style="float:left:top:0"><h2>R1</h2></div> 
    gdgsdgsgsgsgs<br>gsgsgsgsdgsg 
    </div> 

    <div style="display:inline-block;vertical-align:middle"> 
    <div style="float:left:top:0"><h2>W1</h2></div> 
    gdgsdgsgsgsgs 
    </div> 
</div> 

Answer 1

以下のコードを確認してください。私はちょうど変更しましたstyle="float:left:top:0px"

~style="float:left;top:0px"あなたはを見逃しました。セミコロン。あなたのコンテンツを別の<div>に追加しました。 vertical-align:top;にあなたのインラインブロックの設定

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;"> 
 
    <div style="display:inline-block;vertical-align:middle"> 
 
    <div style="float:left;top:0px"><h2>L2</h2></div> 
 
    <div style="height:50px;">gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd</div> 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle"> 
 
    <div style="float:left;top:0px"><h2>R1</h2></div> 
 
    <div style="height:50px;">gdgsdgsgsgsgs<br>gsgsgsgsdgsg</div> 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle"> 
 
    <div style="float:left;top:0px"><h2>W1</h2></div> 
 
    <div style="height:50px;">gdgsdgsgsgsgs</div> 
 
    </div> 
 
</div>

Answer 2

あなたのための問題を解決します。また、インラインブロック内のdivのインラインCSSプロパティの間にセミコロンの代わりにコロン（:)を指定したことを指摘したいと思います。これを行うには

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;"> 
    <div style="display:inline-block;vertical-align:top"> 
     <div style="float:left;top:0"> 
      <h2>L2</h2> 
     </div> 
     gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd 
    </div> 
    <div style="display:inline-block;vertical-align:top"> 
     <div style="float:left;top:0"> 
      <h2>R1</h2> 
     </div> 
     gdgsdgsgsgsgs<br>gsgsgsgsdgsg 
    </div> 
    <div style="display:inline-block;vertical-align:top"> 
     <div style="float:left;top:0"> 
      <h2>W1</h2> 
     </div> 
     gdgsdgsgsgsgs 
    </div> 
</div> 

Answer 3

最良の方法は、あなたが使用している場合は、親のdivに

<div style="display: flex; align-items: baseline; justify-content:center; width: 100%;"> 
 
    <div style="display:inline-block;vertical-align:middle; padding: 16px;"> 
 
    <div style="float:left:top:0"> 
 
     <h2>L2</h2> 
 
    </div> 
 
    gdgsdgsgsgsgs 
 
    <br>gsgsgsgsdgsg 
 
    <br>gsdgdsgdsgdsgd 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle; padding: 16px;"> 
 
    <div style="float:left:top:0"> 
 
     <h2>R1</h2> 
 
    </div> 
 
    gdgsdgsgsgsgs 
 
    <br>gsgsgsgsdgsg 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle, padding: 16px;"> 
 
    <div style="float:left:top:0"> 
 
     <h2>W1</h2> 
 
    </div> 
 
    gdgsdgsgsgsgs 
 
    </div> 
 
</div>

Answer 4

を表示フレックスとフレックススタイリングを使用することです：次のように、最終的なコードは次のようになりますflexとし、h2とテキストコンテナの同義語であるmarginを最終決定する必要があります。

body> div, 
 
body > div > div { 
 
    display:flex; 
 
} 
 
body> div { 
 
    justify-content:center; 
 
} 
 
body > div > div { 
 
    padding:0 1em; 
 
    flex-flow:column; 
 
} 
 
body > div > div > h2 { 
 
    margin:0; 
 
    text-align:center 
 
} 
 
body > div > div > div { 
 
    margin:auto; 
 
}

<div> 
 
    <div> 
 
    <h2>L2</h2> 
 
    <div>gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd</div> 
 
    </div> 
 
    <div> 
 
    <h2>R1</h2> 
 
    <div>gdgsdgsgsgsgs<br>gsgsgsgsdgsg</div> 
 
    </div> 
 
    <div> 
 
    <h2>W1</h2> 
 
    <div> 
 
     gdgsdgsgsgsgs</div> 
 
    </div> 
 
</div>

あなたのコード私の最小限の例下：

body> div, 
 
body > div > div { 
 
    display:flex; 
 
} 
 
body> div { 
 
    justify-content:center; 
 
    text-align:center 
 
} 
 
body > div > div { 
 
    padding: 1em 0.125em; 
 
    flex-flow:column; 
 
} 
 
body > div > div > h2 { 
 
    margin:0 0 0.75em; 
 
} 
 
body > div > div > div { 
 
    margin:auto; 
 
} 
 
h2 { 
 
    background:lightblue 
 
} 
 
h1 { 
 
    font-size:1rem; 
 
    color:tomato; 
 
    margin:0; 
 
    text-align:center;

<h1>minimalistic flex layout version </h1> 
 
<div> 
 
    <div> 
 
    <h2>L2</h2> 
 
    <div>gdgsdgsgsgsgs 
 
     <br>gsgsgsgsdgsg 
 
     <br>gsdgdsgdsgdsgd</div> 
 
    </div> 
 
    <div> 
 
    <h2>R1</h2> 
 
    <div>gdgsdgsgsgsgs 
 
     <br>gsgsgsgsdgsg</div> 
 
    </div> 
 
    <div> 
 
    <h2>W1</h2> 
 
    <div> 
 
     gdgsdgsgsgsgs</div> 
 
    </div> 
 
</div> 
 
<hr/> 
 
<h1>below your code </h1> 
 
<section> 
 
    <div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;"> 
 
    <div style="display:inline-block;vertical-align:middle"> 
 
     <div style="float:left:topleft;top:0"> 
 
     <h2>L2</h2> 
 
     </div> 
 
     gdgsdgsgsgsgs 
 
     <br>gsgsgsgsdgsg 
 
     <br>gsdgdsgdsgdsgd 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle"> 
 
     <div style="float:left:top:0"> 
 
     <h2>R1</h2> 
 
     </div> 
 
     gdgsdgsgsgsgs 
 
     <br>gsgsgsgsdgsg 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle"> 
 
     <div style="float:left:top:0"> 
 
     <h2>W1</h2> 
 
     </div> 
 
     gdgsdgsgsgsgs 
 
    </div> 
 
    </div> 
 
</section>