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> 

제안 레이아웃

현재 레이아웃 인 flexbox이 정말 유용

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>