对齐div中的文本答案

【问题标题】：Aligning text in div对齐div中的文本
【发布时间】：2014-05-16 22:59:24
【问题描述】：

我怎样才能让三个 div 看起来像下面显示的那样，只有 HTML 和 CSS？是否可以以使底部文本保持在最长文本下方的方式对齐它们？

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

【问题讨论】：

id="3" 是正确的语法，另外，避免使用数字作为 id
我知道，只是一个快速的帖子；）
@Haidy 编辑了我的答案...

标签： html css css-position text-alignment

【解决方案1】：

正如@Ruddy 指出的那样^谢谢，我为此使用了 Flexbox 方法和 CSS 定位，所以我使用 display: flex; 作为父元素，并将底部文本包装在 @ 987654327@，而不是使用position: absolute; 将span 定位到bottom，您不必为容器分配固定的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;^（大约）并将底部文本包装在 span 中并使用 @987654338 @ 在容器元素上，但同样，您将无法拉伸其他两个没有 height 的容器，因此它将失败。

因此，您需要将display: table-cell; 与vertical-align: bottom; 一起使用，它会不断将文本推送到具有内容的bottom，此外，vertical-align: bottom; 将确保即使其他容器文本也坚持@ 987654344@

Demo

div.parent {
    display: table;
}

div.parent > div {
    border: 4px solid #000;
    width: 33%;
    display: table-cell;
    vertical-align: bottom;
}

【讨论】：

我没有选择定位解决方案，因为您需要一些固定高度以保持所有容器相等
只要确保在具有display: table; jsfiddle.net/35sK9/2 的容器元素上使用width: 100%;
我看不出这是如何正确的（即使他们选择它是正确的）。这只是将 all 其他文本推到底部，底部由最长的列定义。正如他们显示的图像所示，它显示一些文本位于顶部，然后“底部文本”位于底部，顶部文本仍位于所有列的顶部。如果这确实是正确的，OP 会更好地解释你的问题。
只是为了补充我所说的，因为我很确定这是不正确的，我认为他们想要这样的东西 DEMO HERE 在演示中它只是一个示例，因为文本重叠在底部，但你可以看到这个想法。他们肯定是这么说的。当然，我可能完全错了，并且自欺欺人。
@Ruddy 好吧，感谢您指出这一点，但是，您不能在表格单元格上使用 position: relative;，您的文本会溢出......所以如果 OP 想要一个带有容器的纯 css 解决方案根据其他容器高度进行拉动，这是实现的唯一方法，即使position: absolute; 也无济于事，无论如何我正在努力，将文本保留在顶部，将其他文本保留在底部

【解决方案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; }

【讨论】：

这个不工作？它显示在所有内容的底部。不是这个想法。

【解决方案3】：

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

【讨论】：

【解决方案4】：

你可以使用position:absolute

DEMO

【讨论】：

【解决方案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.

【讨论】：

这太恶心了。我强烈建议永远不要再使用表格来设计网站。仅当您想显示数据时。
原因有很多。比如它写了一个非常混乱的代码，它占用了更多的字节，使用它们的布局很烦人等等。我喜欢表格，但只让它们包含数据，比如网格视图等。
我相信表格中有很多东西，所以我们很多人都忽略了它的知识。 w3c spec，不仅如此，不只是这个问题，对于从这个问题类型开始的复杂问题，你肯定会发现表格更好的选择。
再说一次，我喜欢在需要时使用表格，但在使用它们来设计网站时我不喜欢它们。
OP 正在为他的情况寻找解决方案，而不是替代方案。使用 HTML 来设置页面样式是错误的，这就是 CSS 的用途。使用表格确实很糟糕，因为加载页面需要更多时间，尤其是在嵌套页面时。所以这就是为什么会有反对票。