css - 有没有一种好方法可以在 div 中均匀对齐 div、图像等,而不必先使用 class.first?

标签 css layout css-float html

我希望我的问题是有道理的。

我想知道是否有一种无需使用类来区分左侧 div 即可对齐 div 的好方法,以便浏览器知道不向该 div 添加任何左边距?

假设您有一个包含 3 列的投资组合:

每一列都有:

.column300 {
float:left;
width:300px;
margin-left:20px;
}

然后您将第一列设置为具有类 .first 并且没有左边距:

.column300.first {
margin-left:none;
}

等等。

所以第 1、4、7、10 等列都将添加 class .first,所以一切都很好。


我只是想知道在这些情况下是否有更好的排列方式?也许这样您就不必将 .first 类添加到每个左列。

当您设计将由 CMS 控制的投资组合布局时,它确实适用于向每个左侧列添加类 .first 可能会很困难。

任何想法或建议将不胜感激! :)

最佳答案

我假设您有许多 div 元素,并且类 .column300 彼此相邻。如果是这种情况,请尝试以下 CSS 代码。

.column300:nth-child(3n-2) {
     margin-left: none;
}

您可以在 :nth-child tester 中使用“3n-2”对其进行测试.

关于css - 有没有一种好方法可以在 div 中均匀对齐 div、图像等,而不必先使用 class.first?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8881238/

相关文章:

java - GUI 布局 - 如何将标签、文本字段、按钮准确放置在我想要的位置?

CSS 网格 3 列布局,边距缩小到 0px 后缩小中心

html - 是否可以将 CSS 中的特定样式设置为 'break' float DIV?

html - 无法在 CSS/HTML 中将文本放在图像旁边

javascript - 为 map 中的每个国家添加不同的颜色

CSS:调整列大小以适应除底部 100px 以外的所有内容

css - 当文本是多行时,周围的 div 如何成为内部文本的宽度?

android listview mapview布局问题

css - 如何在没有设置宽度的情况下在IE中显示需要扩展的div

css - 如何使 div 在悬停时消失而不在鼠标移动时闪烁?