例如你想在文本旁边显示一张图片,通常我会这样做:
<table>
<tr>
<td><img ...></td>
<td>text</td>
</tr>
</table>
有更好的选择吗?
最佳答案
您应该将它们漂浮在已清除的容器中。
例子:
https://jsfiddle.net/W74Z8/504/
一个干净的实现是“clearfix hack”。这是 Nicolas Gallagher的版本:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
关于html - 如何在不使用表格的情况下并排显示元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11438910/