Автоколонка с несколькими столбцами

Question

Итак, я создаю дизайн для клиента для одностраничного информационного бюллетеня. Прилагается концепция здесь , и у меня есть все, кроме самой основной копии. Идея состоит в том, что они добавляют новые новости каждый день, и они хотят, чтобы у них была простая страница, к которой применена базовая разметка стиля, которая затем будет добавлена ​​на страницу через AJAX или что-то подобное. Однако в формате столбцов они хотят, чтобы столбцы создавались автоматически каким-либо методом, применяемым, когда содержимое засасывается на страницу. Каждый предварительный просмотр новостей будет одинаковой длины и формата. Мой вопрос заключается в том, можно ли автоматически создавать столбцы определенной высоты и ширины и просто создавать их до тех пор, пока они не закончатся? Я графический дизайнер с опытом работы только в HTML и CSS, поэтому я ищу решения, которые в моих силах. Спасибо за любые предложения, которые кто-либо может иметь! На данный момент я просто смотрю в правильном направлении.

Вот текущая страница, которую я поднял: http://personal.justgooddesign.net/dailydose/ Я хочу, чтобы новый столбец создавался с каждым элементом h2. Вот пример кода:

<h1>Top News Stories for November 11, 2011</h1>
<hr color="#fe0000" />
<h2>Coffee growers in Uganda and elsewhere find climate change hurting their crops</h2>
A farmer near Uganda's Mount Elgon holds Arabica coffee berries. It's getting more difficult to grow coffee berries because of erratic weather patterns. (Photo by Jill Braden Balderas.) In Uganda, the coffee trees are nearly empty — and it's not ...
<br /><a href="http://www.pri.org" target="_blank">http://www.pri.org</a>

<h2>Exclusive: Europe coffee buyers upset at Liffe delivery delays</h2>
Some companies that urgently need robusta coffee -- used mostly in blends and instant coffee and the second largest grown variety after arabica coffee -- are scrambling to find other sources. Many are turning to the spot market and effectively paying ...
<br />
<a href="http://www.reuters.com" target="_blank">http://www.reuters.com</a>

<h2>Asia Coffee: Vietnam Slow to Sell, Indonesia Premiums Dip</h2>
Robusta coffee beans are roasted at the Losari Coffee Plantation in Magelang, Central Java, Indonesia, on Saturday, Sept. 18, 2010. Indonesia is the largest Asian coffee grower after Vietnam. (Bloomberg Photo/ Dimas Ardian) Singapore. ...
<br />
<a href="http://www.thejakartaglobe.com" target="_blank">http://www.thejakartaglobe.com</a>

<h2>Coffee Cupping</h2>
By Rachel Gibian and Nicole J. Levin, CONTRIBUTING WRITERS With a metal spoon and the steady hands of a surgeon, Jaime Vanschyndel, general manager of Barismo, gently pushes aside the coffee grounds that have floated to the surface of the cup. ...
<br />
<a href="http://www.thecrimson.com" target="_blank">http://www.thecrimson.com</a>

<h2>Espresso cups outsell mugs</h2>
Britain's coffee revolution has claimed another victim: the humble mug. According to two leading department stores, sales of espresso cups are now outselling mugs for the first time, as more and more households switch to using coffee machines. ...
<br />
<a href="http://www.telegraph.co.uk" target="_blank">http://www.telegraph.co.uk</a>

<h2>Specialty coffee abounds in Austin</h2>
Austin has a number of local coffee outlets that specialize in roasting their own beans, providing much needed caffeination for countless Austinites. Third Coast Coffee is a fair trade coffee house that serves up many Austinites on a daily basis. ...
<br />
<a href="http://www.dailytexanonline.com" target="_blank">http://www.dailytexanonline.com</a>

<img src="IMG/main-banner_2.jpg" id="ad-b" />

<h1>For Roasters and Retailers</h1>
<hr color="#fe0000" />

Answer 1

Вы можете использовать div с шириной 50% и с плавающей точкой, например:

jsfiddle: http://jsfiddle.net/myn3h/

CSS

#Container {
    overflow: auto;
}

.NewsItem {
    float: left;
    width: 50%;
    height: 100px;
    background: red;
}

HTML

<div id="Container">
    <div class="NewsItem">
        <h1>title</h1>
        <p>
            Lorem ipsum dolor sit amet..
        </p>
    </div>
    <div class="NewsItem">
        <h1>title</h1>
        <p>
            Lorem ipsum dolor sit amet..
        </p>
    </div> 
    <div class="NewsItem">
        <h1>title</h1>
        <p>
            Lorem ipsum dolor sit amet..
        </p>
    </div> 
</div>

Обновление

Вы можете попробовать многостолбцовый макет CSS3.Пока что это широко не поддерживается:

#container {
 -moz-column-width: 13em; 
 -webkit-column-width: 13em; 
 -moz-column-gap: 1em; 
 -webkit-column-gap: 1em;
}

CSS3.info Ссылка: многостолбцовый макет Справочник по W3C: Модуль многостолбцовой разметки CSS ссылка на caniuse: многостолбцовый макет