Question

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

最好将它们全部推广到一个类中，然后消除该类中的差异吗？或者我应该创建两个不同的类，这些类可以轻松解决问题但是使代码更难维护？是否有一种普遍接受的方式来处理这些事情？

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

Answer 1

试试这样的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>

Answer 2

我会使用:nth-child来专门定位一个类。

您可以通过选中以下内容将代码更改为您的偏好设置：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>

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

2 个答案: