html - 如何在不使用表格的情况下将 4 Div 放置在 2x2 Passion 中？

Question

你好，我的要求是在下面不使用表格的情况下将四个 div 放在 passion 中，

下面给出了我的 4 Div 我尝试应用内联 css，但可能是错误的。

<div id="dateDiv0" style="width: 50%;height: 30px;float: left;"></div>
<div id="chartDiv0" style="width: 50%;height: 30px;float: left;"></div>
<div id="dateDiv1" style="width: 50%;height: 30px;float: right;"></div>
<div id="chartDiv1" style="width: 50%;height: 30px;float: right;"></div>

提前致谢!

Answer 1

CSS 网格正是为这种情况而创建的。

section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* set column sizes here */
    grid-template-rows: auto auto; /* we want two rows */

    grid-gap: 10px; /* how far between cells? */
    grid-auto-flow: column; /* fill in by column, not row */

    /* temporary property for visualization */
    height: 150px;
}

section div {
    border: 1px solid #000;
}

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>

对于所有推荐 flexbox 的人，我建议阅读 Rachel Andrew 的博客。网格应与 2D 布局一起使用，而 flex 与 1D 一起使用。