Кроссбраузерный макет с тремя столбцами - PullRequest
1 голос
/ 25 июня 2009

Допустим, у меня есть один ряд с тремя столбцами - несколько кнопок слева и справа и средняя ширина жидкости.

Если содержимое среднего столбца достигает области среднего столбца, переполнение должно быть скрыто.

Это решение хорошо работает в Firefox, но вывод Opera и IE6 сильно отличается.

<div style="width:/fluid/">
   <input type="image" src="img1.png" style="margin: 4px 0 0 5px; float: left;"/>
   <input type="image" src="img2.png" style="margin: 4px 5px 0 0; float: right;"/>
   <input type="image" src="img3.png" style="margin: 4px 5px 0 0; float: right;"/>
   <input type="image" src="img4.png" style="margin: 4px 5px 0 0; float: right;"/>
   <div style="margin: 0pt 68px 0pt 26px;">
      <p style="margin: 0; cursor: pointer; overflow: hidden;">abcdefghijklmnopqrstuvxy</p>
   </div>
</div>

В Firefox все это отображается в одной строке, как и ожидалось - одна кнопка слева, три кнопки справа, а видимая часть содержимого зависит от ширины контейнера div.

В Opera - часть содержимого, которая не помещается в одну строку, продолжается в следующей строке.

В IE6 - кнопки находятся в первом ряду, а содержимое отображается в следующем ряду во всю длину.

1 Ответ

5 голосов
/ 25 июня 2009
...