适合整个高度的浮动元素

Question

我需要创建这样的东西：

我创建了这个html

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

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

我尝试设置height: 100%，position: relative和margin-bottom: auto也top:0; bottom: 0，但它只能与position: absolute一起使用，但之后就不会{39} ; t float。

有人知道我怎样才能让我的html在屏幕上显示出来？

Answer 1

您应该将日期放在文本容器中，因为这可能会始终紧跟您的文本。

您可以将元素显示为块，并将标题浮动到左侧。如果您随后提供了文本overflow:hidden属性，它将清除浮动元素并占用剩余空间：

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。如果您要选择这种方式，则可能需要为width元素设置strong：

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

JSFiddle