html - 如何使用 CSS 网格对齐信息？

Question

我试图在一个漂亮的详细布局中显示细节并使其响应。但是我无法使用 CSS 网格按预期进行。这是 codepen .

目前是这样的。

但这就是我想要的样子。

HTML 代码

<div class="mainContent">
    <div class="mainContent__stuff">
        <div><img src="cup.jpg" width="75" height="75" class="circle" /></div>
        <div>
            <p>Style & Accessory has been approved.</p>
            <p>An endorsement for Apple Watch</p>
            <h5>Subscribers-12344</h5>
            <h5>Female-92.4</h5>
            <h5>Male-7.6</h5>
        </div>
        <div><img src="cup.jpg" width="105" height="105"></div>
    </div>
</div>

CSS 代码

.wrapper .mainContent {
    display: grid;
    grid-template-columns: 1fr;
    grid-column: 4/10;
    grid-row: 6/14;
    background-color: #fff;
    box-sizing: border-box;
}

.mainContent .mainContent__stuff {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column: 4/10;
}

Answer 1

您想重组 HTML 并使用 flexbox 方法。您可以按如下方式更改您的 HTML 以赋予它更多的结构并允许使用 CSS 为它提供更多的可玩性:

<div>
    <p><b>Style & Accessory</b> has been approved.</p>
    <p>An endorsement for Apple Watch</p>
    <div class="counts">
        <div class="first">
            <div>Subscribers</div>
            <div>12,344</div>
        </div>
        <div>
            <div>Female</div>
            <div>92.4%</div>
        </div>
        <div>
            <div>Male</div>
            <div>7.6%</div>
        </div>
    </div>
</div>

您可以通过这种方式使用 CSS 魔术以您喜欢的方式使用 flexbox 显示您的内容:

.mainContent__stuff {
    display: flex;
    color: gray;
}

.mainContent__stuff div {
    flex: 1 0 auto;
}

.mainContent__stuff div .counts {
    display: flex;
    justify-content: space-between;
}

.mainContent__stuff div .counts div {
    flex: 0 0 auto;
    padding-right: 20px;
}

.mainContent__stuff div .counts .first {
    border-right: 2px solid lightgray;
}

这是一个codepen举例说明行为。