Question

我怎样才能看到三个div，因为它们只显示HTML和CSS？是否可以将底部文本保留在最长的文本下方式对齐它们？

Div aligning

<html>
  <div id=1>
    Short text

    Bottom text?
  </div>
  <div id=2>
    Long text

    Bottom text?
  </div>
  <div id=3>
    Not so long text

    Bottom text?
  </div>
</html>

Answer 1

正如@Ruddy指出^感谢，我使用了Flexbox方法，使用CSS定位，所以我使用display: flex;作为父元素，并包裹底部span中的文字，而且使用span定位bottom到position: absolute;，您不必将固定height分配给容器，因为我们正在使用display: flex;

Flex Demo

div.parent {
    display: flex;
}

div.parent > div {
    border: 4px solid #000;
    width: 33%;
    float: left;
    position: relative;
    padding-bottom: 30px; /* Make sure you tweak this, to the 
                             highest height of your bottom content*/
}

div.parent > div > span {
    position: absolute;
    bottom: 0;left: 0;
}

嗯，很明显，您可以将position: absolute;与bottom: 0;一起使用padding-bottom: 30px; ^（约）并将底部文字换成{ {1}}并在容器元素上使用span但是再次，您将无法拉伸其他两个没有position: relative;的容器，因此它将失败。

因此，您需要将height与display: table-cell;一起使用，它会继续将文字推送到包含内容的vertical-align: bottom;，同时bottom也会看到它其他容器文本贴在vertical-align: bottom;

上

Demo

bottom

Answer 2

是的，这是可能的。但首先：给三个wrapper。除此之外，你不能使用数字作为ID。

在这里：http://jsfiddle.net/SP68r/

<div class="wrapper">
  <div id="first">
    Short text

    Bottom text?
  </div>
  <div id="second">
    Long text
      Long text
      Long text
      Long text
      Long text
      <div class="bottom">bottom text</div>
  </div>
  <div id="third">
    Not so long text
  </div>
</div>

CSS

.wrapper { width: 350px; }
#first, #second, #third { float: left; width: 100px;  }
#first { margin-right: 10px; }
#second { padding-bottom: 40px; margin-right: 40px; }
div.bottom { position: absolute; bottom: 0; }

Answer 3

您可以使用position:absolute

DEMO

Answer 4

<div id="1" style="border: 2px black solid; width: 120px; 
height: 160px; position: relative;">
<div style="text-align: left;" id="1-1">
Not so long text
</div>
<div style="left: 17%;position: absolute; bottom:0px;" id="1-2">
Bottom text?
</div>
</div>

Answer 5

简单解决方案：使用表格。

<table border="1" width="100">
<tr valign="top">
    <td>DIV 1</td>
    <td>DIV 2<BR/>THIS IS A BIG, BIG, LONG PARAGRAPH, WHICH WILL GO DOWN THAN     THE OTHER TWO CELLS.</td>
    <td>DIV 3</td>
</tr>
<tr>
    <td>BOTTOM TEXT</td>
    <td>BOTTOM TEXT</td>
    <td>BOTTOM TEXT</td>
</tr>
</table>

小提琴here。

在div中对齐文本

5 个答案: