CSSとHTMLを使った素敵な列と行

Question

私は実際にフロントエンドの開発者ではないので、誰かがこの簡単なことで私を助けることができるかどうか疑問に思っています。私の要求は本当にシンプルですが、下の図は私が何をしようとしているのかを示していますが、CSSの知識が不足しているためできません。

現在のCSS

.col { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align: left; 
    margin: auto; 
    width: 290px; 
} 
.row:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

現在のHTML

<div id="content-div"> 
<h2 align="center" style="padding-top:10px;">Welcome back, {{ username }}!</h2> 
<div class="row"> 
    <div class="col"> 
     <h2>Account</h2> 
     <p>AccountID: {{ accountid }}</p> 
     <p>Username: {{ username }}</p> 
     <p>Register Date: {{ register_date }}</p> 
     <p>Last Login: {{ lastlogin_date }}</p> 
     <p>Kills: {{ kills }}</p> 
     <p>Deaths: {{ deaths }}</p> 
     <p>Money: ${{ money }}</p> 
     <p>Score: {{ score }}</p> 
     <p>Admin Level: {{ adminlevel }}</p> 
    </div> 
    <div class="col"> 
     <h2>Items</h2> 
     {% for i in items %} 
      <p>{{ i.item_name|capitalize }}: {{ i.value }}</p> 
     {% endfor %} 
    </div> 
    <div class="col"> 
     <h2>Skills</h2> 
     {% for i in skills %} 
      <p>{{ i.skill_name }}: {{ i.value }}</p> 
     {% endfor %} 
    </div> 
</div> 

提案レイアウト

現在のレイアウト

Answer 1

フレキシボックスは、このために非常に便利である、ここでいくつかのコメントを持つプロトタイプです。あなたはより多くの私は、そのようなMDNによって提供されるような、チュートリアル/スペック/ドキュメントをお勧め学びたい場合：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

.row { 
 
    margin: -1em; /*Negative margin method to set padding between columns*/ 
 
    display: flex; /*align-items defaults to stretch, so columns will have the same height*/ 
 
} 
 
.col { 
 
    flex: 1 1 0; /*Make all columns the same width*/ 
 
    margin: 1em; /*Corresponds to negative margin above*/ 
 
    display: flex; 
 
    flex-flow: column; /*A column with the header on top and info below*/ 
 
} 
 
.col > .info { 
 
    flex-grow: 1; /*Info grows to fill the column*/ 
 
    border: 3px solid black; 
 
}

<div id="content-div"> 
 
<h2 align="center" style="padding-top:10px;">Welcome back, {{ username }}!</h2> 
 
<div class="row"> 
 
    <div class="col"> 
 
     <h2>Account</h2> 
 
     <div class="info"> 
 
     <p>AccountID: {{ accountid }}</p> 
 
     <p>Username: {{ username }}</p> 
 
     <p>Register Date: {{ register_date }}</p> 
 
     <p>Last Login: {{ lastlogin_date }}</p> 
 
     <p>Kills: {{ kills }}</p> 
 
     <p>Deaths: {{ deaths }}</p> 
 
     <p>Money: ${{ money }}</p> 
 
     <p>Score: {{ score }}</p> 
 
     <p>Admin Level: {{ adminlevel }}</p> 
 
     </div> 
 
    </div> 
 
    <div class="col"> 
 
     <h2>Items</h2> 
 
     <div class="info"> 
 
     {% for i in items %} 
 
      <p>{{ i.item_name|capitalize }}: {{ i.value }}</p> 
 
     {% endfor %} 
 
     </div> 
 
    </div> 
 
    <div class="col"> 
 
     <h2>Skills</h2> 
 
     <div class="info"> 
 
     {% for i in skills %} 
 
      <p>{{ i.skill_name }}: {{ i.value }}</p> 
 
     {% endfor %} 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

私の理解に基づいて、以下のコードは、あなたの問題を解決するために動作するはずです。

これは単なるイラストですので、必要に応じてコードを変更してください。ブートストラップ付き

.child { 
 
    display: inline-block; 
 
    width: 30%; 
 
    border: 1px solid #000; 
 
    min-height: 100px; 
 
    padding: 10px 0; 
 
} 
 
.child div { 
 
    margin-left: 20px; 
 
} 
 
@media(max-width: 768px) { 
 
    .child { 
 
     display: block; 
 
     width: 100%; 
 
     margin: 10px 0; 
 
    } 
 
}

<div class="container"> 
 
    <div class="child"> 
 
    <div>First</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div>Second</div> 
 
    </div> 
 
    <div class="child"> 
 
    <div>Third</div> 
 
    </div> 
 
</div>