Я закодировал себя в углу CSS. У меня есть список изображений, которые я показываю рядом друг с другом, используя неупорядоченный список. Неупорядоченный список помещается внутри фиксированной ширины div, так что каждые 3 изображения будут отображаться следующие 3 изображения на следующей «строке».CSS горизонтальный imagelist в IE
Каждый литий в ул не только отображать изображения, она отображает все виды материала, например, так:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<a href=""><img src="" /></a>
<p>Description</p>
</li>
</ul>
</div>
Это прекрасно работает в большинстве браузеров, за исключением IE7. IE7 отображает изображения под друг друга, а не рядом друг с другом. Я знаю из классической горизонтальной техники меню, что это можно зафиксировать, установив float влево для li. Это не работает для моей ситуации, потому что я не знаю высоту каждого li, это зависит от контента. При наличии разных высот для каждого li возникают некоторые очень странные ситуации размещения, например изображение, расположенное справа от пустой строки. Вот раздели версия моего CSS:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
В принципе, я просто хочу IE7 меня слушать и уважать рядный блок заявление, которое должно отображать элементы рядом друг с другом.