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

Question

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

是否最好将它们全部概括为一个class，然后散列出class中的差异？还是我应该创建两个不同的 classes 来轻松解决问题，但会使代码更难维护？有没有一种普遍接受的方法来处理这类事情？

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

Answer 1

我会使用 :nth-child 专门针对 class。

您可以通过检查以下内容来根据您的喜好更改代码：NthMaster

.item:nth-child(even) > span {
  float: left;
}

<div class="container">
  <div class="item">
    <img src="http://placehold.it/50x50">
    <span>Text</span>
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50">
    <span>Text</span>
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50">
    <span>Text</span>
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50">
    <span>Text</span>
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50">
    <span>Text</span>
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50">
    <span>Text</span>
  </div>
</div>

Answer 2

像这样尝试一些 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>

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

How do you handle divs that are mostly the same but have some subtle differences?

html

css

optimization

coding-style