4

固定高さ要素で複数列の CSS レイアウトを使用しているため、ブラウザーはコンテンツを含めるのに必要な数の列を作成します。新しい列は常に他の列の右側に表示されますが、3 つの列の後で分割し、列 4、5、6 を 1、2、3 の下に表示したいと考えています。これは JS で実行できると思いますが、何を選択すればよいかわかりません。

.columns {
    width: 360px;
    font-size: 100%;
    text-align: justify;
    height: 300px;
    display: block;
    padding-bottom: 30px;
       -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
       -moz-column-width: 100px;
    -webkit-column-width: 1000px;
       -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
}

<div class="columns"><p>Lorem ipsum.../p></div>
4

1 に答える 1

2

カラム化された要素を、必要な幅のコンテナーに入れ、overflow:hidden にすることができます。次に、JavaScript を使用して列要素を複製し、その複製をコンテナー (元の要素の直後) に配置して、複製に margin-left: -100% または相対位置を指定します。

于 2011-07-11T18:43:11.700 に答える