Какие элементы HTML должны быть заключены в div?(<img>, <input>, <textarea>, <form>, <ul>и т. Д.)

Question

Много раз, когда я проектирую, я думаю над вопросом:

Какие html-элементы следует заключить в div и в каких случаях? (<img>,<input>,<textarea>,<form>, <ul> и т. Д.)

---

Пример A- ввод текста:

---

опция1 без div :

<input class="input-wrapper" type="text" />

option2 с делением вокруг входа :

<div class="input-wrapper"><input type="text" /></div>

---

Пример B- img:

---

option1 без div :

<img class="image-wrapper" src="MyPic.jpg" alt="my pic" />

option2 с делением вокруг входа :

<div class="image-wrapper"><img src="MyPic.jpg" alt="my pic" /></div>

---

---

Edit:

Я говорю о случаях, когда у нас, как у дизайнера и программиста, есть время сделать лучший путь с использованием позиции: относительный абсолютный, с плавающей точкой и без <br/> и т. Д.

Спасибо

Answer 1

Часто вы используете div для обтекания других элементов, в основном для макета.Нет правила, согласно которому вы не должны оборачивать элементы div вокруг элементов или нет.Повторяя здесь ответ wb, большую часть времени вы можете достичь того же результата, применяя стили к конкретным элементам.

Я, когда начинал с css, использовал много div в качестве обёртки, хотя они были бесполезны.Но потребовалось некоторое время, чтобы привыкнуть к правильному макету с соответствующими тегами и стилями.

Некоторые ссылки могут быть полезны для чтения

http://www.apaddedcell.com/div-itis#

http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

Answer 2

Этот вопрос слишком расплывчат для одного ответа.Все сводится к тому, каковы ваши требования к дизайну.Для вашего примера A вы, вероятно, обернули бы свои поля ввода в тег, так что дополнительный div для каждого ввода кажется излишним IMO.Опять же, у вас могут быть некоторые требования, которые требуют особого стиля.

Это также сводится к предпочтениям.Некоторые люди предпочитают заключать дополнительный div, чтобы обернуть одно изображение, вместо добавления соответствующего CSS, чтобы сделать это изображение блочным элементом.