html - 如何在 html 中创建由 DIV 元素组成的行布局

Question

在此处输入图像描述

像这样，任何帮助将不胜感激。

标签： html

Answer 1

您可以在此处使用 flex 样式来创建该布局。所以 HTML 如下。

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

和 CSS：

.wrapper {
    display: flex;
    justify-content: space-between;
}
.box {
    width: 200px;
    height: 200px;
    background: black;
}

@media only screen and (max-width: 767px){
    .wrapper {
        flex-direction: column;
        align-items: center;
    }
}

更多信息在这里。

谢谢