html - 将元素放入行中并在每行的开头和结尾对齐它们？

Question

我一直在尝试弄清楚如何在一个 div 中对齐四个段落，如下所示:

text1                    text2
text3                    text4

其中 text1 和 text3 位于 div 框的开头，text2 和 text4 位于 div 框的结尾。 text1 的大小也将大于所有其他文本。

Answer 1

您可以使用 CSS 表格布局、等高行和 super 实体。

.table {
    display: table;
    table-layout: fixed; /*for equal width columns*/
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    /*vertical-align: top;*/ /*enable this if necessary*/
}
.big {
    font-size: 2em;
}

<div class="table">
    <div class="row">
        <div class="cell big">text1</div>
        <div class="cell">text2</div>
    </div>
    <div class="row">
        <div class="cell">text3</div>
        <div class="cell">text4</div>
    </div>
</div>