如何並排顯示數據

Question

我試圖使用最簡單的代碼並排顯示數據。

問題是當數據丟失時，右側無法正確float 。

如何解決？

 .pair { background-color: #ccc; } .pair dt { float: left; width: 90px; text-align: right; color: #999; } .pair dd { margin: 0 0 0 100px; } 

 <dl class="pair"> <dt>Date</dt> <dd>date goes here</dd> <dt>Country</dt> <dd>USA</dd> <dt>Age</dt> <dd></dd> <dt>Name</dt> <dd></dd> <dt>Other</dt> <dd>other info goes here</dd> </dl> 

Answer 1

您需要添加dd:empty {clear:left}

並且您可能需要一個float:left .pair中的.pair （可選）

 .pair { background-color: #ccc; float: left } .pair dt { float: left; width: 90px; text-align: right; color: #999; } .pair dd { margin: 0 0 0 100px; } .pair dd:empty { clear: left } 

 <dl class="pair"> <dt>Date</dt> <dd>date goes here</dd> <dt>Country</dt> <dd>USA</dd> <dt>Age</dt> <dd>00</dd> <dt>Name</dt> <dd>xxxx</dd> <dt>Other</dt> <dd>other info goes here</dd> </dl> <dl class="pair"> <dt>Date</dt> <dd>date goes here</dd> <dt>Country</dt> <dd>USA</dd> <dt>Age</dt> <dd></dd> <dt>Name</dt> <dd></dd> <dt>Other</dt> <dd>other info goes here</dd> </dl> 

Answer 2

添加clear: both到.pair dt這迫使它中斷

編輯/添加：我添加了一個片段，這是唯一的更改。

 .pair { background-color: #ccc; } .pair dt { float: left; width: 90px; text-align: right; color: #999; } .pair dd { margin: 0 0 0 100px; } 

 <dl class="pair"> <dt>Date</dt> <dd>date goes here</dd> <dt>Country</dt> <dd>USA</dd> <dt>Age</dt> <dd></dd> <dt>Name</dt> <dd></dd> <dt>Other</dt> <dd>other info goes here</dd> </dl> 

 .pair { background-color: #ccc; } .pair dt { float: left; width: 90px; text-align: right; color: #999; clear: both; } .pair dd { margin: 0 0 0 100px; } 

 <dl class="pair"> <dt>Date</dt> <dd>date goes here</dd> <dt>Country</dt> <dd>USA</dd> <dt>Age</dt> <dd></dd> <dt>Name</dt> <dd></dd> <dt>Other</dt> <dd>other info goes here</dd> </dl>