Question

Здравствуйте!

В стандартном шаблоне новости выводятся в цикле в таком виде:

Код
<p class="news-item"> <a>Название</a> <div> Тело новости </div> </p>

Но мне нужно, чтобы элементы выводились в одну строку. Например, если у меня большой экран, то влазит 3 элемента, а если маленький, то влазит 2 элемента, а третий на вторую строку уходит. Вот как-то так.

Я пробовал <p> заменять на <div style="display:inline;">, но нужного результата нет.

В принципе, можно, чтоб хотя бы по 2 элемента выводились в одной строке. Это, наверное, можно сделать через <table>, но я не знаю, как изменить условие в цикле, чтобы он выводил все правильно.

Помогите идеями, пожалуйста.

Answer 1

Цитата
Я пробовал <p> заменять на <div style="display:inline;">, но нужного результата нет.

И не будет. Напишите так:

<div style="float: left">

Ну и ширину какую-то укажите ему.

После вывода блока новостей не забудьте еще поставить блок с таким стилем:
clear : both;

Т.е., все вместе должно выглядеть примерно так:

Код
<div id="news">    <div class="news-item">новость 1</div>    <div class="news-item">новость 2</div>       ...    <div class="news-item">новость N</div> </div> <div class="clear"></div>

Стили:

Код
.news-item {   float: left;   width: 100px;   margin: 5px; /*на ваше усмотрение*/ } .clear {   clear : both; }

Answer 2

Спасибо, сейчас попробую

Answer 3

Круто, все работает как надо! Спасибо большое!

Answer 4

да незачто. вообще, это не самый лучший метод, выстраивать несколько (неизвестно сколько) плавающих элементов друг за другом. Надо на разных разрешениях монитора тестировать.
Почему -а потому, что лучше точно знать, сколько блоков влезет в обертку в ряд, а то фигня может получиться. Т.е., у обертки фиксировать ширину, и рассчитать ширину плавающих блоков, приплюсовать отступы. И должно быть так - ширина обертки = (ширина плавающих+отступы)*количество. Вообще это практически тоже самое получится, что таблица. Ну это "лирическое отступление", а так, дело ваше, конечно.