Question

我目前正在重做一些代码以更新为HTML5（并试图去除CSS），但到目前为止，我的对齐和布局似乎并没有按预期工作。这是我所拥有的一部分：

<main class="width">
    <div class="r1">
        <section class="c1">
            <h1>header</h1>
            stuff
        </section>
        <!--Line Break-->
        <section class="c1">
            <h1>header</h1>
            stuff
        </section>
    </div>
    <!--Next Column-->
    <div class="r2">
        <section class="c2">
            <h1>header</h1>
            stuff
        </section>
    </div>
</main>

CSS：

@font-face {
    font-family:'Roboto';
    font-style:normal;
    font-weight:400;
    src:url(/resources/font.woff) format('woff');
}
* {
    margin:0;
    padding:0;
    font-size:small;
    font-family:Roboto;
    vertical-align:middle;
    border:none;
    text-decoration:none;
}
.width {
    margin:0 auto;
    width:86%;
    min-width:1000px;
}
.bg {
    min-width:1000px;
    background:linear-gradient(#444, #000, #444);
}
main {
    line-height:1.5;
    text-align:center;
}
body>.main {
    font-size:0;
}
section {
    border:1px solid #BBB;
    background:#000;
    border-radius:7px;
    display:inline-block;
    overflow:hidden;
}
h1 {
    background:linear-gradient(#444, #000, #444);
    padding:5px;
    color:#FFF;
}
.r1 {
    color:#FFF;
    display:inline-block;
}
.r2 {
    color:#FFF;
    display:inline-block;
}
.c1 {
    width:33%;
}
.c2 {
    width:66%;
}

（忽略r1和c1命名。它们实际上不代表行或列）

然而，这不像过去那样有效。我想要做的是在彼此上方有两排66％宽度的列，然后在它们旁边，在它们右边有一个更大的单个33％宽度列。相反，我在一行上得到了前两个部分，占据了66％的宽度（所以每个部分的宽度为33％），然后下一部分最终在它下面。

理想情况下，我想使用flex代码，以便我可以用尽所有可用空间，但我还是新手，并且不太了解我的方法。使用百分比宽度的问题在于，即使在移除空白区域后，当放大到足够大时，事物仍然会破坏到下一行，并且我认为flex方法更优雅和现代。

使用flex CSS对齐div和section元素

0 个答案: