0

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

1 回答 1

0

您可以使用 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 参考：多列布局
W3C 参考：CSS 多列布局模块
caniuse 参考：多列布局

于 2011-12-03T10:38:35.410 回答