html - 你如何处理大部分相同但有一些细微差别的 div?

标签 html css optimization coding-style

我想制作 5 或 6 个包含图像和一些静态文本的 div。但是,我想交替显示图像在 div 的哪一侧。所以第一个 div 在左边,下一个在右边,依此类推。

是否最好将它们归纳为一个类,然后在该类中散列差异?或者我应该只创建两个不同的类来轻松解决问题,但会使代码更难维护?是否有一种普遍接受的方法来处理这类事情?

我倾向于通过创建两个单独的类来处理这类事情,但我不确定这是最好的方法,我想知道是否有更好的方法来解决这个问题。

最佳答案

试试这样的 CSS:

section > div:nth-of-type(odd) > img {
    float:left;
}

section > div:nth-of-type(even) > img {
    float:right;
}

...和这样的 HTML:

<body>
    <section>
        <div>
            <img src='xxx.png'>
            <p>Text</p>
        </div>
        <div>
            <img src='xxx.png'>
            <p>Text</p>
        </div>
        <div>
            <img src='xxx.png'>
            <p>Text</p>
        </div>
    </section>
</body>

关于html - 你如何处理大部分相同但有一些细微差别的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31577231/

相关文章:

java - 如何提高代码质量以查看字符串是否与 Java 正则表达式之一匹配

html - 将填充插入 Bootstrap 列网格

css - float CSS 问题 - 类似于 Windows 8 的磁贴

jquery - 表格标题垂直文本

css - 管理z-index

css - 在Safari中删除显示/隐藏密码图标

c++ - 可以做些什么来优化离开方法和清空局部变量堆栈所花费的时间?

matlab - 如何减少这个特定代码块的处理时间?

javascript - 输入框在 backspace/del 上不能正常工作

html - 从 Html 源在 Excel 中创建注释