2

だから、私は CSS3 列で遊んでいて、コンテンツが十分に長い場合、水平方向にスクロールするページを作成する、水平方向の列の束にコンテンツをレイアウトしようとしています。ただし、コンテンツをビューポートの左右の端に突き合わせたくはありませんが、スクロールバーを左右の端に触れさせたいと思っています。パディングでこれを行うことができると思っていましたが、コンテンツの最後までスクロールするまで、最初は完全に機能しているように見えました.

コードはとてもシンプルです。HTML:

<section id="content">
  <p>Lorem ipsum...</p>
  <p>And a bunch more paragraphs to overflow the viewport...</p>
</section>

そしてCSS：

#content {
    height: 400px;
    padding: 10px 50px;
    column-count: 2;
    column-gap: 50px;  
    -webkit-column-count: 2;
    -webkit-column-gap: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
}
#content p {
    /* just to make it easier to see the boundaries */
    background-color: rgba(255,0,0,0.1);
}

ここにもフィドルを設定しました: http://jsfiddle.net/uu9Tv/。

私はたくさんのことを試しましたが、望ましい効果をもたらすものは何もないようです... #content のマージンにより、スクロールバーがビューポートの側面に到達しません。

また、別の方法で試してみましたが、基本的にラッパー div でオーバーフロー/スクロールを処理し、#content 要素に水平マージンを配置しましたが、まったく役に立たなかったようです。ここを参照してください: http://jsfiddle.net/vQLCz/。

水平方向にスクロールするレイアウトで、カラム化されたコンテンツの右端にスペースを確保する方法に光を当てることができる人はいますか?

4

1 に答える 1

1

あなたのアプローチは理にかなっていますが、パディングsection#contentはオーバーフローしたコンテンツには適用されません。列があるとこれがわかりにくくなるため、最初section#no-columnsにhttp://jsfiddle.net/ansonhoyt/wGKFa/にある私の例を見てください。このセクションには、。を含む段落が含まれていnowrapます。パディングが背景色を制限するが、オーバーフローするテキストは制限しないことに注意してください。

ミックスに列を追加しても、オーバーフローした段落にはパディングは適用されません。良い代替案は、にマージンを置くこと<p>です。このソリューションには制限があります。マージンは正しい「パディング」と「ギャップ」の両方を提供するため、両方とも50pxである必要があります。

ああ、CSSの限界。CSS3の列は素晴らしいですが、制限があります....CSS4がのようなよりエレガントな追加を追加することを期待できますp:last-column { margin-right: 50px; }。

于 2012-11-09T15:04:59.833 に答える