1

私はこのような効果を達成しようとしています:

http://i.imgur.com/GkcjX.jpg

ご覧のとおり、6 つの列があります (私にとっては 4 つで十分です)。4 つの列にまたがるフローティング div と画像がいくつかあります。次のコードを使用すると、Chromium (Chrome) で挿入された div の幅が列の幅に制限されます。

http://i.imgur.com/hK4Nk.png

<div style="column-count: 4; -moz-column-count:4; -webkit-column-count:4; text-align: justify">
    <p>Header</p><hr />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero. Proin vitae magna vitae leo auctor consectetur. Pellentesque tempor pretium leo at volutpat. Nunc ultricies, est id ultrices pulvinar, nisl nunc porttitor nisi, aliquet pulvinar dolor neque sed lacus. Integer a risus quis nunc rutrum pellentesque. Praesent non ligula massa, nec gravida mauris. Quisque vitae libero nec augue sollicitudin gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor, tortor ultricies lacinia gravida, nibh purus ultrices lacus, sed tempus augue ligula ac tortor. Proin urna tortor, tempus quis commodo id, eleifend ut augue. Nulla sit amet dolor tellus. Maecenas et pharetra tellus. Vivamus auctor odio id est imperdiet in tincidunt felis gravida. Vestibulum ultricies mauris ut dolor vulputate lacinia. In imperdiet urna a neque sollicitudin dictum sit amet ut tortor. Duis commodo volutpat mauris, quis euismod magna mattis non. Duis dapibus, felis eu bibendum ultricies, erat urna accumsan sapien, eu congue magna neque in massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nec pretium sem. Proin aliquet nisl at orci cursus auctor. Praesent lacus quam, aliquet at vestibulum nec, euismod sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla tincidunt tincidunt. Integer tincidunt vehicula cursus. Quisque sed est auctor arcu ultricies iaculis eget id justo. Sed suscipit tellus et purus dignissim tristique. Ut non purus arcu, sed imperdiet odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        Mauris in magna orci. 

        <div style="float: left; width: 700px; height: 200px; background-color: gray">
            ff

        </div>
        Etiam leo lectus, accumsan at imperdiet sit amet, tincidunt ac tortor. Aenean tellus est, condimentum vitae scelerisque tempus, cursus et nisi. Vivamus ligula lacus, viverra id sodales quis, tempus in lectus. In ut ipsum libero. Aenean vitae orci ligula, non ultricies mauris. Donec metus dolor, feugiat ut blandit vitae, lobortis nec erat. Praesent sapien diam, egestas sit amet commodo a, varius at nulla. Vestibulum fermentum auctor porttitor. Vivamus tristique enim bibendum nulla consectetur molestie. Vivamus lacus velit, dignissim at iaculis id, sodales volutpat odio. Sed mollis consectetur aliquam. Cras rhoncus, nulla non congue porttitor, sapien ipsum lacinia ipsum, pharetra tincidunt arcu ligula id justo. Praesent nec enim tellus, eu aliquam orci.Integer lacinia accumsan nisl at tristique. Sed eget aliquam ipsum. In et magna ut erat posuere ultrices rutrum eget nulla. Nullam mauris nibh, sollicitudin eu aliquet sit amet, pulvinar sit amet tortor. Nunc at nulla sed urna pretium tristique eget quis massa. Quisque ultricies sagittis orci, sed dignissim ante egestas varius. Vivamus et ipsum libero, sagittis euismod enim. Donec volutpat feugiat orci, ut pellentesque nulla sodales gravida. Nulla egestas cursus pharetra. Praesent varius nibh vitae ligula auctor at sollicitudin lacus dapibus. Donec condimentum porttitor sem ac auctor. Mauris a nunc sit amet eros ornare accumsan. Nullam mauris purus, vestibulum id imperdiet sit amet, imperdiet id ante. Nullam nibh leo, pharetra eget fringilla nec, lobortis quis mauris. Fusce varius nulla non orci dapibus ut convallis dolor dictu
        Duis bibendum, dui sit amet sagittis scelerisque, lectus eros luctus dui, a rhoncus justo nisl sed lectus. Proin placerat suscipit lectus id malesuada. Vestibulum vitae nisl et orci fermentum facilisis. Pellentesque malesuada lacinia tristique. Mauris posuere lorem vitae dolor imperdiet porttitor. Maecenas eu tortor sem. Donec non eros dolor, sed interdum magna. Vivamus id commodo urna. Curabitur dapibus bibendum tincidunt. Praesent tincidunt consectetur metus, ut placerat sem volutpat interdum. Praesent sit amet posuere ipsum. Nunc posuere dolor quis erat pulvinar vitae ornare nibh ultricies. Vestibulum molestie porttitor mauris sed viverra. Nunc rutrum rhoncus lacus ac tincidunt. Nam at arcu ut erat pharetra porttitor. Fusce accumsan dui eget diam placerat vel sodales nisl feugiat.In consectetur orci eu velit porta non tristique velit faucibus. Etiam ac pellentesque sapien. Cras bibendum lorem in felis commodo nec pellentesque mauris fringilla. Maecenas magna augue, facilisis eu dignissim nec, interdum et enim. Pellentesque auctor sapien eu augue volutpat sit amet pretium ipsum vehicula. Aliquam erat volutpat. Nam ut leo eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tortor dolor, molestie at vestibulum nec, dignissim ut est. Donec iaculis vulputate purus et mattis. Morbi pulvinar accumsan mollis. Nulla a est lacus. Ut nisl enim, accumsan ut accumsan et, ultricies sit amet nulla. Nunc lacus purus, cursus et vulputate eget, pharetra id sem.
        Mauris in magna orci. Etiam leo lectus, accumsan at imperdiet sit amet, tincidunt ac tortor. Aenean tellus est, condimentum vitae scelerisque tempus, cursus et nisi. Vivamus ligula lacus, viverra id sodales quis, tempus in lectus. In ut ipsum libero. Aenean vitae orci ligula, non ultricies mauris. Donec metus dolor, feugiat ut blandit vitae, lobortis nec erat. Praesent sapien diam, egestas sit amet commodo a, varius at nulla. Vestibulum fermentum auctor porttitor. Vivamus tristique enim bibendum nulla consectetur molestie. Vivamus lacus velit, dignissim at iaculis id, sodales volutpat odio. Sed mollis consectetur aliquam. Cras rhoncus, nulla non congue porttitor, sapien ipsum lacinia ipsum, pharetra tincidunt arcu ligula id justo. Praesent nec enim tellus, eu aliquam orci.Integer lacinia accumsan nisl at tristique. Sed eget aliquam ipsum. In et magna ut erat posuere ultrices rutrum eget nulla. Nullam mauris nibh, sollicitudin eu aliquet sit amet, pulvinar sit amet tortor. Nunc at nulla sed urna pretium tristique eget quis massa. Quisque ultricies sagittis orci, sed dignissim ante egestas varius. Vivamus et ipsum libero, sagittis euismod enim. Donec volutpat feugiat orci, ut pellentesque nulla sodales gravida. Nulla egestas cursus pharetra. Praesent varius nibh vitae ligula auctor at sollicitudin lacus dapibus. Donec condimentum porttitor sem ac auctor. Mauris a nunc sit amet eros ornare accumsan. Nullam mauris purus, vestibulum id imperdiet sit amet, imperdiet id ante. Nullam nibh leo, pharetra eget fringilla nec, lobortis quis mauris. Fusce varius nulla non orci dapibus ut convallis dolor dict
    </p>                
</div>

Firefox の効果も壊れています。

http://i.imgur.com/80B9k.png

これを達成する方法はありますか?

4

1 に答える 1

2

CSS3マルチカラムレイアウトモジュールは、 「要素が複数のカラムにまたがることを可能にする」column-spanプロパティを提供します。
残念ながら、このプロパティは「all」または「none」の値のみを想定でき(たとえば、4列のレイアウトを使用している場合、2列のみの要素にまたがることはできません)、に適用することはできません。フローティングまたは絶対位置の要素。W3C仕様の
以前のバージョンでは、column-spanプロパティは整数値(要素がまたがる列の正確な数を指定するため)を想定することもできますが、このオプションは最新バージョンのW3C仕様にはありません。古い仕様では、列間のフローティング要素もサポートされていましたが、この機能も最新の仕様から削除されました。
Webには、CSS3マルチカラムレイアウトモジュールに関するいくつかのチュートリアルがあります。私の意見では、これは少し古いもの(2011年11月)であっても、いくつかの有用な例とさらなる参考資料が含まれています。
CSS3マルチカラムモジュールはすべてのブラウザでサポートされているわけではないことに注意してください(詳細については、このページを参照してください)。したがって、クロスブラウザソリューションを探している場合、これは最良の選択ではない可能性があります。
そうは言っても、私はいくつかのフローティングdivを使用して、目的の結果を達成しようとしました。

<!DOCTYPE html>
<html>
    <head>
        <style>
        #leftblock { 
            width: 66%;
            margin-right: 10px;
            float: left;
        }
        #rightblock { 
            width: 32%;
            float: left;
        }
        .lefttext { 
            column-count: 2; 
            -moz-column-count: 2; 
            -webkit-column-count: 2; 
            text-align: justify;
        }
        #righttext {
            column-count: 2; 
            -moz-column-count: 2; 
            -webkit-column-count: 2; 
            text-align: justify;
        }
        #image1 {
            width: 100%;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
        }
        #image2 {
            width: 100%;
            height: 100px;
            background-color: green;
        }
        h3 {
            color: blue;
        }
        h4 {
            padding: 0;
            margin: 0;
        }
        p {
            margin-top: 0;
            padding-top: 0;
            margin-bottom: 20px;
        }
        .column1 {
            float: left; 
            width: 50%;
        }
        .column2 {
            float: right; 
            width: 49%;
        }
        </style>
    </head>
    <body>
        <div id="leftblock">
            <div id="image1"></div>
            <div>
                <div class="column1">
                    <div>
                        <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.</b></p>
                        <h3>Author</h3>
                        <hr>
                    </div>
                    <div class="lefttext">
                        <h4>Title</h4>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        </p>                
                        <h4>Title</h4>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        </p>                
                    </div>
                </div>
                <div class="column2">
                    <div class="lefttext">
                        <h4>Title</h4>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        </p>                
                        <h4>Title</h4>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        </p>                
                        <h4>Title</h4>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                        </p>                
                    </div>
                </div>
            </div>
        </div>
        <div id="rightblock">
            <div id="righttext">
                <h4>Title</h4>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                </p>                
                <h4>Title</h4>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                </p>                
                <h4>Title</h4>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                </p>                
                <h4>Title</h4>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget mi a odio dapibus ornare. Phasellus magna lacus, pharetra scelerisque accumsan nec, feugiat ac libero.
                </p>                
            </div>
            <div id="image2"></div>
        </div>            
    </body>
</html>

このソリューションの主な欠点は、同じ(またはほぼ同じ)高さを取得するために、各divのテキストの長さを慎重に「バランス」させる必要があることです。
このページをChromium、Opera、Firefoxでテストしました。私はLinuxで作業しているので、Internet Explorerでも機能するかどうかはわかりません(おそらく機能しないでしょう)。
これが最善の解決策ではないかもしれないことを私は知っていますが、それがさらなる実験の出発点になることを願っています。

于 2012-10-20T21:13:03.293 に答える