0

水平スクロールのピンタレストとして最も簡単に説明できるレイアウトを作成しようとしています。

のように、前のアイテムに対して積み重ねられるアイテムがあり、上から下に拡張するのではなく、左から右に拡張します。

これまでのところ、CSS3 の複数列プロパティがまさに私が求めているものであるように見えます。私が持っている唯一の問題は、幅が柔軟であることです（列幅を宣言しているにもかかわらず）。異なるブラウザー ウィンドウは、異なるサイズの列をレンダリングします。

現在使用:

.multicol {
    -webkit-column-width: 150px;
    -webkit-column-gap: 0;
    height: 400px;
    width: auto;
}

私の問題の例 (ウィンドウのサイズを変更して幅の変更を確認する): http://jsfiddle.net/pbg3r/4/

幅を一定に保つ方法はありますか？Xpx 幅の列が必要なだけで、列が追加されると、必要に応じてページが水平方向に拡張されます。

w3 の仕様によると、それを固定しておく唯一の方法は、「すべての長さの値 (横書きのテキストでは、'width'、'column-width'、'column-gap'、および 'column-rule-width') は、指定します。」

コンテナに一定の幅を与え、水平方向に連続的に拡張する機能を維持する方法はわかりませんが。私がそうしても、設定された幅は保証されません。

各列の Xpx の幅を保証する方法はありますか?

助けてくれてありがとう。

4

1 に答える 1

2

さまざまなブラウザーがさまざまなサイズの列をレンダリングするという問題に対する考えられる答えは単純なものです。

CSS スタイルについては、上記のようにブラウザー.multicolのスタイルを既に設定しています。(ブラウザ プレフィックス) はブラウザでのみ機能するwebkitため、他のブラウザで正しく表示するには、各ブラウザ プレフィックスを同じスタイルに追加する必要があります。-webkitwebkit

これは、スタイル シートを次のようにする必要があります: (必要に応じて、各ブラウザー スタイル間のスペースを取り除くことができます)。

.multicol {

/*webkit*/
-webkit-column-width: 150px;
-webkit-column-gap: 0;

/*moz*/
-moz-column-width: 150px;
-moz-column-gap: 0;

/*opera*/
-o-column-width: 150px;
-o-column-gap: 0;

height: 400px;
width: auto;
}

、、またはブラウザで表示したときにコンテンツを正しく表示する更新されたフィドルを次に示します(Internet Explorer のスタイルを追加するには、次を使用するだけです: )webkitfirefoxopera-ms-

スタイルシートで設定したその他のスタイルには、ブラウザのプレフィックスも追加する必要があります。

于 2012-12-09T19:03:30.690 に答える