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 に答える