[英]How to display the data side by side
I'm trying to display the data side by side using the most simple code possible. 我试图使用最简单的代码并排显示数据。
The problem is when the data is missing, the right side doesn't float
correctly. 问题是当数据丢失时,右侧无法正确
float
。
How to fix it? 如何解决?
.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>
you need to add dd:empty {clear:left}
您需要添加
dd:empty {clear:left}
and you may want a float:left
in .pair
(optional) 并且您可能需要一个
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>
add clear: both
to .pair dt
- this forces it to break the line 添加
clear: both
到.pair dt
这迫使它中断
EDIT/ADDITION: I added a snippet where this is the only change. 编辑/添加:我添加了一个片段,这是唯一的更改。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.