如何在不使用桌子的情况下在 2x2 Passion 中放置 4 个 Div？

Question

你好，我的要求是在不使用表格的情况下在下面给出四个 div，

下面给出了我的 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 的博客。Grid 应该与 2D 布局一起使用，flex 应该与 1D 一起使用。