如何在不使用表的情况下并排显示项目？

本文介绍了如何在不使用表的情况下并排显示项目？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 例如，您想在文字旁边显示图片，通常我会这样做： < 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;}​ 这篇关于如何在不使用表的情况下并排显示项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！