1

CSS3列を使用して、いくつかのdivを上から下に、次に左から右に並べようとしています。かなりうまくいくようですが、下の画像に示すように、この1つの問題があります。各 div に背景を指定し、ウィンドウの高さを調整すると、背景全体を 1 つのブロックに移動するのではなく、背景を 2 つの列に分けて徐々に追加します。これは本当に悪いように見えます。ウィンドウが小さすぎて div の 1 ピクセルの高さでも収まらないとすぐに、div 全体を次の列に移動するように、div の背景を保持する方法があるかどうか疑問に思っていました。

次に、ウィンドウ サイズに関して、列をページの中央に配置したいと思います。これを Chrome (最近のバージョン)、Firefox (最近のバージョン)、および IE 10 で動作させたいと考えています。

ここでフィドルできます：http://jsfiddle.net/eE3z6/

#mainContent /* The containing div */
{
    position: absolute;
    top: 50px;
    bottom: 50px;   
    margin: 10px;   
    column-width: 400px;
    -webkit-column-width: 400px;
    -moz-column-width: 400px;
}

.blockData /* The divs inside are all of this class */
{
    position: relative;
    width: 380px;
    height: 30px;
    padding: 4px;
    margin: 0px 0px 10px 0;
    border: 4px outset grey;
    background: lightgrey;
}

ここに画像の説明を入力

4

2 に答える 2

2

-webkit-column-break-inside : avoid;とを追加するだけdisplay : inline-blockです.blockData

デモ: http://jsfiddle.net/eE3z6/4/

于 2013-08-02T19:42:05.110 に答える
-1

私は昨日これに答えたと思っていました。.blackData および .listData スタイルから float:left を取り除き、.listData スタイルに padding-bottom を追加する必要があります。20px はうまくいくようです。列は、次の列に何を送信するかを決定するときに (背景ではなく) コンテンツをチェックし、.listData の下部にパディングを追加することで、コンテンツを背景と同じサイズにします。

また、jsfiddle には .blockData スタイルが 2 回含まれているため、そのうちの 1 つを削除する必要があります。

列がメイン コンテンツ div の中央に配置されるようにするには、#mainContent から position:absolute スタイルを削除し、.blockData マージンを 5px 0px から 5px auto に変更する必要があります。auto を margin に追加すると、コンテンツが自動的に中央揃えになります。また、すべての列が上に揃うように、.blockData の上からマージンを取り、下にのみ配置することをお勧めします。

ここで、#mainContent から絶対配置を外すと、ブロックを中央に配置できますが、再調整して 1 つのブロックを次の列に送信することはなく、各列のブロック数を均等にします (つまり、最初が 7 で 2 番目が 1 の場合、最初が 4 で 2 番目が 4 になります)。それは本当にあなたがそれをどのように表示したいかによって異なります。

また、jsfiddle を修正しました。#mainContent の position: absolute をオフにしてオンにするだけで、私が話していることがわかります。

編集：

各背景が途切れないようにするために-padding bottom を使用する代わりに、.blockData で display: inline-block を使用できます (これは column-break-inside: avoid に似ていますが、この場合はすべてのブラウザーで機能します)。

于 2013-08-02T19:39:47.100 に答える