0

2列のレイアウト（CSS複数列レイアウトモジュールを使用）があり、2番目の列の上部に画像を配置したいと思います。テキスト内の休憩が入る場所に画像が配置されるように、自分で画像を配置する必要があるようです。

問題は、列も均等に入力する必要があることです。

JavaScriptなしでこれを解決する方法はありますか？これは画像の代わりにdivを使用しますが、アイデアはその列の上部に赤いブロックを配置することです。

.col-2 {
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
    width:800px;
}

.block {
    width:100%;
    height:100px;
    background-color:red;
}
<div class="col-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit neque sed eros posuere molestie. Quisque mattis ante ac mauris iaculis semper vehicula nibh condimentum. Pellentesque scelerisque euismod metus a sodales. Praesent dolor nisl, consectetur at tincidunt eu, dapibus at orci. Etiam congue metus id sapien rutrum euismod. Proin porttitor rhoncus hendrerit. Phasellus pellentesque venenatis felis a eleifend. Suspendisse pretium placerat hendrerit. Praesent tempus risus in ligula condimentum egestas. Vivamus vitae nunc massa, luctus egestas lectus. Vivamus at turpis sed nisl molestie vulputate. Vivamus nec tortor et ante consectetur dignissim ac in odio. Cras et nisl non enim congue scelerisque. Curabitur in condimentum eros. Curabitur vehicula augue id neque dignissim vitae venenatis nisi feugiat.

Curabitur tristique ullamcorper neque, ac sodales eros suscipit eu. Nulla pretium accumsan lacus, non fermentum felis lacinia mattis. Sed quis turpis eros. Nullam ut turpis libero. Nam quis magna ac tortor elementum pulvinar. Quisque rutrum eleifend elit, eget consectetur nulla dapibus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean rhoncus commodo tellus, sit amet pulvinar mi vehicula non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mollis dignissim felis, et posuere quam molestie nec. Duis sit amet pulvinar dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lorem justo, lobortis id imperdiet nec, lobortis varius mauris. Nullam sit amet nulla arcu. Nullam ornare posuere leo vitae rhoncus.

Sed venenatis dui sapien. Praesent sed enim lacus, vitae venenatis metus. Aenean bibendum nibh a risus scelerisque blandit. Maecenas nibh enim, pulvinar in interdum quis, rhoncus ut orci. Vestibulum a ullamcorper ante. Nulla facilisi. Pellentesque placerat ullamcorper diam at mattis. Aliquam posuere suscipit metus sed sollicitudin. Phasellus in quam odio, ac scelerisque purus. Morbi at nunc odio, nec aliquam urna. Proin mi orci, varius vitae dapibus ac, consequat id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a dui lectus, ut congue nunc. Cras diam tortor, auctor in vehicula vitae, egestas eget neque. In nisi odio, laoreet a convallis in, varius at risus.
    <div class="block"></div>
</div>

4

3 に答える 3

2

CSS3 仕様には「段区切り」スタイルがありますが、これは Webkit でのみ実装されています。それはあなたが探していることを正確に実行しますが、悲しいことにSafariとChromeでのみ.

列分割要素をコンテンツの通常のフロー内に収め、次のスタイルを追加する必要があります。

div.block {
  width: 100px; /* this shouldn't be more than your column width */
  height: 100px;
  -webkit-column-break-before: always;
}

例（Safari/Chromeで表示）

http://css-infos.net/property/-webkit-column-break-before

http://www.w3.org/TR/css3-multicol/#column-breaks

于 2011-01-19T13:42:44.560 に答える
1

2 つの div を別の div でラップし、マークアップの.blockdiv の前に.col-2div を配置できます。

ここに例を示します。

于 2011-01-18T13:25:15.067 に答える
0

あなたがやろうとしていることを理解している場合（divまたは画像をすべての列で完全にスパンする）、CSSでこれを行う方法は、 column-span: all; を指定することです。全幅にまたがる要素 (img または div) で。ただし、これは現在 Opera でのみサポートされており、内部ビルドでのみサポートされています (願わくば、すぐに公開リリースが含まれることを願っています)。

column-span を使用しない場合は、スクリプトに依存するか、マークを上に移動して column-count を適用する要素の外側に移動する必要があります。

于 2011-01-19T01:58:31.520 に答える