浮動元素適合整個高度

Question

我需要創建這樣的東西：

我創建了這個HTML

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

但是當版本為float時，我無法使版本適合整個高度，因為版本可以具有不同的大小，所以我需要具有float。

我嘗試將height: 100%設置height: 100% ， position: relative且margin-bottom: auto也是top:0; bottom: 0 top:0; bottom: 0但僅適用於position: absolute但不浮動。

有人知道如何使我的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 。 如果要選擇這種方式，則可能要為您的strong元素設置width ：

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

JSFiddle