如何在不使用表的情况下并排显示项目？ [英] How to display items side-by-side without using tables?

问题描述

例如，您想在文字旁边显示图片，通常我会这样做：

 < table& 
< tr> 
< td>< img ...>< / td> 
< td> text< / td> 
< / tr> 
< / table>是否有更好的替代方案？
 
 
 
 $ b < >解决方案
您应该在清除的容器中   。示例：
 
 
 
  
 
 
 
干净的实现是clearfix hack。这是 Nicolas Gallagher 的版本：
  / ** 
 *对于现代浏览器
 * 1.空格内容是避免Opera错误的一种方法，当
 * contenteditable属性包括在文档中的任何其他位置。 
 *否则会导致空格出现在元素
 *的顶部和底部，这是明确的。 
 * 2.如果使用
 *`：before`来包含子元素的顶部边距，则使用`table`而不是`block`是必须的。 
 * / 
 .clearfix：before，
 .clearfix：after {
 content：; / * 1 * / 
 display：table; / * 2 * / 
} 
 
 .clearfix：after {
 clear：both; 
} 
 
 / ** 
 *仅适用于IE 6/7 
 *包含此规则以触发hasLayout并包含浮点数。 
 * / 
 .clearfix {
 * zoom：1; 
} 
 
  
 
For example you want to display an image beside a text, usually I would do this:
<table>
    <tr>
        <td><img ...></td>
        <td>text</td>
    </tr>
</table>
Is there a better alternative?
解决方案
You should float them inside a container that is cleared.

Example:

https://jsfiddle.net/W74Z8/504/



A clean implementation is the "clearfix hack". This is Nicolas Gallagher's version:
/**
 * 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;
}
​


                        
这篇关于如何在不使用表的情况下并排显示项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！