Почему мои значки располагаются сверху вниз, а не слева направо в макете DIV?

Question

У меня есть эти 3 иконки, заключенные в отдельные DIV, все из которых заключены в один DIV:

<div id="icons">

  <div id="divtxt" class="divicon">
    <img src="/icons/text.png" id="icontxt" class="icon"/>
  </div>

  <div id="divpdf" class="divicon">
    <img src="/icons/pdf.png" id="icondoc" class="icon"/>
  </div>

  <div id="divrtf" class="divicon">
    <img src="/icons/rtf.png" id="iconrtf" class="icon"/>
  </div>
</div>

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

  div#icons
  {
    width:200px;
    height: 100px;
  }

  div.divicon
  {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0 0 0 0;
  }

Любые предложения будут оценены.

Answer 1

А теперь кое-что более всеобъемлющее:

Ты выглядишь так, будто хочешь просто ряд иконок. Используя ваш HTML, вам нужно float div, содержащие значки, чтобы они были рядом друг с другом. Причина, по которой вам нужно плавать, заключается в том, что div - это элемент уровня блока (в отличие от встроенного), что означает, что ничего не может существовать в горизонтальном пространстве рядом с ним.

Вы можете добиться этого эффекта, добавив правило float: left; к div.divicon

Floating делает две вещи: он убирает элемент блока из потока страниц, позволяя другим элементам существовать рядом с ним (или обтекает его), и уменьшает ширину блока, чтобы он соответствовал содержимому. Что касается родителя, плавающий элемент не имеет высоты. Чтобы проиллюстрировать это, просто попробуйте дать #icons цвет фона или границы. Вы заметите, что он не будет отображаться - или будет отображаться как линия 1px.

Чтобы родитель мог распознать высоту плавающего элемента, необходимо сообщить родителю, что переполнение должно быть скрыто с помощью этого правила:

#icons { overflow:hidden; }

Это также работает в IE, но не всегда, поэтому иногда вам может понадобиться установить высоту или ширину или сделать zoom:1, который имеет тенденцию исправлять множество ошибок IE (посмотрите «ошибка hasLayout», если вам нужна дополнительная информация ).

Теперь для другого решения:

Ты выглядишь так, будто хочешь просто ряд иконок. Если нет причин для окружения изображений в div (а в вашем примере их нет), я бы предложил вам сделать что-то вроде этого:

<div id="icons">
    <img src="/icons/text.png" id="icontxt" />
    <img src="/icons/pdf.png" id="icondoc" />
    <img src="/icons/rtf.png" id="iconrtf" />
</div>

#icons { /* rules for our container go here */ margin:0; padding:0; /* etc... */ }
#icons img { /* rules for your icons */ border:none; margin:0 2px; /* etc... */ }

Я удалил избыточные элементы div и атрибут класса избыточности на изображениях. Так как изображения являются встроенными элементами, вам не нужно будет крутить их с помощью плавающих элементов, и у вас не будет лишних элементов div, которые могут вызвать divitis дегенеративную болезнь HTML, которая поражает многие веб-сайты и распространяется по плохим советам. Помните, используйте только то, что вам нужно - не используйте это только потому, что оно есть.

Надеюсь, это поможет,

Дарко

Answer 2

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

Answer 3

Вам нужно

float: left;

в ваших значках div #