两个 50% 的 div

Question

我正在做一份 HTML 时事通讯，我想要两个占页面 50% 的 div，一个在左边，一个在右边。

但问题是我尝试使用浮动和制表符，但没有人在做这项工作。

你有命题吗？谢谢 <3

这是我的代码:)

#yellow {
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: rgb(214, 196, 0);
        order: 2;
        width: 100%;
    }

    #yellowL {
        position: relative;
        float: left;
        width: 50%;
        margin: auto;
        order: 1;
    }

    #yellowR {
        position: relative;
        float: right;
        width: 50%;
        margin: auto;
        order: 2;
    }

和我的 HTML :)

<body id="NewsletterPRONA">
<div id="news">
    <h1>News</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum, urna nec vulputate molestie, neque leo ultricies mi, ut dignissim magna magna vitae ex. Nunc eu massa purus. Vivamus velit lacus, vulputate a neque ut, faucibus tincidunt elit. Sed volutpat, nunc quis vulputate sagittis, ipsum metus elementum enim, sed ornare velit elit ac nibh.</p>
</div>
<div id="yellow">
    <h1 id="h1v2">Geschäftsverlauf / Déroulement des affaires</h1>
    <div id="yellowL">
        <h1 id="h1v2">Offerten</h1>
        <p>

        </p>
        <h1 id="h1v2">Projekte</h1>
        <p>

        </p>
    </div>
    <div id="yellowR">
        <h1 id="h1v2">Offres</h1>
        <h2>Bruit</h2>
        <p>

        </p>
        <h2>Sols</h2>
        <p>

        </p>
        <h2>Déchets</h2>
        <p>

        </p>
        <h2>EIE</h2>
        <p>

        </p>
        <h2>Physique et acoustique du bâtiment</h2>
        <p>

        </p>
        <h1 id="h1v2">Projets</h1>
        <h2>Bruit</h2>
        <p>

        </p>
    </div>
</div>

Answer 1

将 float:left 应用于两个 div 即可

Html

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

CSS

.box{
    margin:0;
    width:50%;
    float:left;
}

Answer 2

在新闻通讯中，最好的解决方案是使用 table。
不是一个很好的解决方案，但最兼容

Answer 3

试试这个DEMO

更改CSS:

#yellow {
        height: 100%;
        background-color: rgb(214, 196, 0);
        order: 2;
        width: 100%;
    }

    #yellowL {
        float: left;
        width: 50%;
        margin: auto;
        order: 1;
    }

    #yellowR {
        position: relative;
        float: right;
        width: 50%;
        margin: auto;
        order: 2;
    }

两个 50% 的 div

Two divs of 50%

html

css

width