9

水平オーバーフローが自動に設定された親 div (メイン) があります。次に、すべての列プロパティを持つ子要素 (列) を作成します。問題は、コンテンツがビューポートを超えると、列がビューポートまでしか移動しないように見えるため、右側の余白やパディングを制御できなくなることです。たとえば、「列」に背景色を付けると、コンテンツがそれ以上スクロールしても、背景はビューポートの端までしか表示されません。

.main {
    overflow-x: visible;
    overflow-y: hidden;
    width: 100%;
}
.columns {
    background: red;
    column-fill: auto;
    column-width: 670px;
    column-gap: 80px;
    height: 120px;
    padding: 20px;
    width: auto;
}

<div class="main">
     <div class="columns">
           <p></p>
           <p></p>
           <p></p>
           <p></p>
           <p></p>
     </div>
</div>

例を次に示します: http://jsfiddle.net/fyG24/

4

2 に答える 2

5

新しい回答：疑似要素を使用して支援する

あなたのコメントに基づいて、ここにあなたの欲望を満たすと私が信じる新しいフィドルがあります。それは私がラベルを付けた余分なdivラッピングと次のcssを追加します：.columns.scroller

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;    
}
.main {
    background: yellow;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.main:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 120px; /* match columns */
    background: red;
    z-index: 0;
}

.scroller {
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}


.columns {
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
    padding: 0 20px;
    text-align: justify;
    width: auto;
}


.columns > p:last-of-type:after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    float: right;
    margin-right: -20px;
    margin-top: -1px;
}

で疑似要素を使用して、それらに設定する明示的な高さに設定する.main背景を.columns指定します。次に、最後に別の疑似要素を使用してp、列の最後の20pxを強制的にレンダリングします。どれだけ長く、どの部分を占めるかに関係なく機能するはずです。また、テキストの列の最後にある場合は、新しい列を生成height: 1pxしmargin-top: -1pxないはずです。

元の回答：オーバーフローを移動して正しいマージンを設定する

をbackground転送するには、CSSを変更する必要があります。

.main {
    overflow: hidden;
    width: 100%;
}

.columns {
    overflow-x: auto;
}

これは、元のコードの水平スクロールバーを制御しているの幅.columnによって背景が制限されているためと思われます。純粋に非表示にしてからオンに設定すると、スクロールがdivによって制御され、表示できるようになります。100%.main.mainoverflow-x: auto.columns.columnsbackground

右端にパディングがないことを修正するために、私が思いついた唯一の考えは、以下を追加することでした。

.columns > p:last-of-type {
    margin-right: 20px;
}

pこれにより、直接の子の最後の要素に右マージンが設定され、その要素から、.columnsあなたが求めていると思われる外観が得られます。

これが変更されたフィドルです（Firefoxでのみテストされています）。

于 2012-05-30T18:51:52.070 に答える
0

次のように列cssを分割するだけで、より良い結果が得られました。

.columns {
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
}
.columns p {
    background: red;
    height: 120px;
    padding: 0 20px;
    text-align: justify;
    width: auto;
}
于 2012-05-30T18:54:18.600 に答える