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

Flexbox对此非常有用，这是一个带有一些注释的原型。如果您想了解更多信息，我建议您阅读教程/规范/文档，例如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

根据我的理解，以下代码应该可以解决您的问题。

这只是一个例子，请根据您的要求修改代码。

＆＃13;

.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;
    }
}

＆＃13;

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

＆＃13;

一个很好的列和行与CSS和HTML

2 个答案: