多列自动流程

Question

因此，我正在为单页新闻通讯网站构建客户端设计。附加的是概念here，除了实际的主副本之外，我已经构建了所有内容。他们的想法是，他们每天都会添加新的新闻，他们想要做的是拥有一个简单的页面，该页面具有应用于新闻的基本样式标记，然后通过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

您可以使用宽度为50％且浮动的div，如下所示：

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参考：multi column layout
W3C参考：CSS multi-column layout module
caniuse参考：multiple column layout