Question

我一直试图找出如何在div对齐中获得四个段落，如下所示：

text1                    text2
text3                    text4

text1和text3位于div框的开头，text2和text4位于div框的末尾。 text1也会比其他所有文本都大。

Answer 1

您可以尝试使用内嵌布局：

＆＃13;

div > p {display:inline-block;width:50%;text-align:left}
body{margin: 0;padding:0}

＆＃13;

<div>
    <p>text1</p><!--
    --><p>text2</p>
</div>
<div>
     <p>text3</p><!--
    --><p>text4</p>
</div>

＆＃13;

Answer 2

您可以使用CSS表格布局，相等高度行和超级实体。

.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>

Answer 3

您可以使用float和clear：

＆＃13;

#t1, #t3 {
  float: left;
  clear: left;
}
#t2, #t4 {
  float: right;
  clear: right;
}

＆＃13;

<div id="t1">Text 1</div>
<div id="t2">Text 2</div>
<div id="t3">Text 3</div>
<div id="t4">Text 4</div>

＆＃13;

Answer 4

您可以嵌套其他div来执行此操作。

text1和text3进入div（leftDiv），它在主div中左对齐

text2和text4进入div（rightDiv），它在你的主div中对齐

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

4 个答案: