4

各列が画像で埋められる複数列のレイアウトを作成しようとしています。列のコンテナには水平スクロールが必要ですが、ウィンドウのサイズ変更時に列のギャップが変化してはならず、最後の列は片側が切り取られて表示されなければなりません。

列の高さは親コンテナーによって異なり、ウィンドウの高さが変更された場合、列全体を画像で埋めるために画像を再配置する必要があります (画像を水平方向に切り取ってはいけません)。

img {
    height: 70px;
    width: 100px;
}

.container
{ 
    height:400px; 
    overflow-x: scroll; 
    overflow-y: hidden;
    -webkit-column-width: 100px;
    column-width: 200px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
}​

ここに私が現在持っているもののjsfiddleがあります： http://jsfiddle.net/9dL2F/1/

これを行う方法について何か考えはありますか？

4

2 に答える 2

2

これはトリッキーです。コンテナーの幅全体が列に分割されるため、列幅と列ギャップの両方を固定することはできません。コンテナの幅が変わると、ブラウザはコンテナをいっぱいにしようとします。CSS 列間の固定ギャップ を参照してください。

:の幅を管理でき.containerます ( jsfiddleを参照)

@media (min-width: 480px) { .container { width: 480px; } }
@media (max-width: 480px) and (min-width: 360px) { .container { width: 360px; } }

...しかし、それは管理するクエリがたくさんあります!

縦に並べられた画像は重要ですか? 行に問題がない場合は、CSS3 列を破棄できます。

img { display: inline-block; width: 100px; height: 70px; margin-right: 20px;}

同様に、フロートすることもできます:

img { float: left; width: 100px; height: 70px; margin-right: 20px;}

私はそれらを使用したことがなく、IE のサポートはまだありませんが、CSS3 Flexboxを試すことができます。

これらはどれもきれいではありませんが、私は美しい解決策を知りません...おそらくCSS4が私たちを救うでしょうか?

于 2012-10-26T16:16:06.280 に答える
0

アンソンさんの仰る通りです。他の列を管理する必要があります:

固定位置の 2 つの左側の列、固定位置とコンテンツの 1 つの右側の列 (または、次のように、コンテナーはブラウザー ウィンドウに応じて自動サイズ変更されます。

.in-content{
position:absolute;
height:auto;
color:#2d2d2d;
float:left;
left:280px;
top:33px;
bottom:auto;
right:14%;
padding:0px 10px 39px 0px;
text-align:justify;
text-decoration:none;
text-transform:none;
z-index:-33;
overflow:auto;
}
@media (min-width:27%) {.in-content{width:40%;}}
@media (max-width:40%) and (min-width:27%) {.in-content{width:27%;}}

以上です^_^ ありがとうございます。

于 2014-03-12T03:00:58.443 に答える