Что лучше для разметки слева направо: плавающее или отображаемое: встроенное? - PullRequest
Новая
       14

Что лучше для разметки слева направо: плавающее или отображаемое: встроенное?

2 голосов
/ 10 июля 2009

У меня есть несколько значков внутри divs, и мне нужно было расположить их слева направо, вместо стандартного макета сверху вниз, который, кажется, идет с div. Вероятно, это не новость для большинства людей, которые знают CSS, но я понял (с помощью небольшая помощь ), что я могу заставить элементы div размещаться слева направо, используя либо: 

float: left/right

или 

display:inline.

Мой вопрос - предпочтительнее одного ? 

<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;
  }

Ответы [ 2 ]

3 голосов
/ 10 июля 2009

Вы не можете установить явную ширину / высоту для встроенных элементов, поэтому, если они должны быть определенного размера, вы застряли с плавающей их. Плавающие элементы могут вызывать различные причуды макета, поэтому определенно предпочтительнее встроенный метод, если у вас нет для перемещения объектов.

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

2 голосов
/ 10 июля 2009

Одно не предпочтительнее другого; они делают разные вещи. Когда что-то отображается внутри строки, содержимое, которое выходит за пределы текущей строки, переносится на следующую строку. С другой стороны, число с плавающей точкой сохраняет отображаемый элемент в виде прямоугольного блока. Поэтому, в зависимости от вашей конкретной ситуации, вы можете найти оба полезных.

В вашем примере float, вероятно, будет работать намного лучше.

...