html - 适合整个高度的 float 元素

Question

我需要创建这样的东西:

我创建了这个 html

<li>
  <strong>Version 2.0</strong>
  <span>Text</span> -
  <i>December 29, 2013</i>
</li>

但是当它有 float 时我不能使版本适合整个高度，我需要有 float 因为版本可以有不同的大小。

我尝试设置 height: 100%, position: relative 和 margin-bottom: auto 还有 top: 0; bottom: 0 但它只适用于 position: absolute 但它不会 float 。

任何人都知道如何使我的 html 像在屏幕上一样？

Answer 1

您应该将日期放在文本容器中，因为它可能总是紧跟在您的文本之后。

您可以将元素显示为 block 并将标题 float 到左侧。如果您随后给文本 overflow:hidden 属性，它将清除 float 元素并占用所有剩余空间:

margin 和list-style-type 看起来更漂亮

li{list-style-type:none}
li strong{display:block; float:left; margin-right:5px;}
li span{display:block; overflow:hidden;}

JSFiddle

另一种方法是将列表项显示为 table，并将其子元素显示为 table-cells。如果您要选择这种方式，您可能希望为您的 strong 元素设置一个 width:

li{display:table;}
li strong{display:table-cell; width:100px;}
li span{display:table-cell}

JSFiddle