Question

我正在制作HTML简报，我想要两个占据50％页面的div，一个在左边，一个在右边。

但问题是我尝试使用花车和标签，但没有人在做这项工作。

你有推荐吗？谢谢＆＃39; s＆lt; 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

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

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

3 个答案: