Как вы обрабатываете divs, которые в основном одинаковы, но имеют некоторые тонкие отличия?

Я хочу сделать 5 или 6 divs, которые будут содержать изображение и некоторый статический текст. Тем не менее, я хочу изменить, с какой стороны div находится изображение. Итак, первый div будет слева, следующий справа и т. Д.Как вы обрабатываете divs, которые в основном одинаковы, но имеют некоторые тонкие отличия?

Лучше всего обобщить их все на класс, а затем выбить различия внутри этого класса? Или я должен просто создать два разных класса, которые могли бы легко решить проблему, но сделать код немного сложнее в обслуживании? Есть ли общепринятый способ справиться с такими вещами?

Я, как правило, занимаюсь этим делом, создавая два отдельных класса, но я не уверен, что это лучший способ сделать это, и мне интересно, есть ли лучшие способы решения этой проблемы.

источник

2015-07-23 xcdemon05

Попробуйте 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>

источник

2015-07-23 02:42:49

Я бы использовал :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>

источник

2015-07-23 02:41:41

Как вы обрабатываете divs, которые в основном одинаковы, но имеют некоторые тонкие отличия?

ответ

Смежные вопросы