1

積み重ねられたDIVのリストがあります。基本的にそれらは浮かんでいません。

高さは500pxに固定されており、DIVが一番下に来たら、次の列から始めてほしいと思います。したがって、約200個のアイテムがある場合、垂直方向ではなく水平方向にスクロールしてdivを表示します。

DIVの数は非常に多くなる可能性があり、理想的には、画面のサイズが変更されたときに行がプッシュされるようにします。したがって、固定された行がなく、隣り合って浮かんでいます。

<div class="row show-grid">
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
</div>

.span1 {
width: 60px;
}

.span1-nofloat {
    float: none;
}

ここに画像の説明を入力してください

4

3 に答える 3

1

CSS3変換を使用したソリューションは次のとおりです。jsfiddle

アイデアは、水平に積み重ねられているかのように通常の「フローティングボックス」から始めますが、その後、コンテナがで変換されrotate(-90deg)、ボックスが垂直に積み重ねられるようになります。現在正しくないボックスコンテンツの向きを修正するために、それらは。で元に戻されrotate(90deg)ます。

したがって、ボックスコンテナの幅は、実際には最終的な高さを定義します。ボックスアイテムを加算または減算してみると、ボックスが左から右に垂直に積み重ねられていることがわかります:)

于 2013-03-20T20:40:05.033 に答える
1

CSS3列を使用して、CSSを使用して流れるような列レイアウトを実現するのはどうですか？結局のところ、CSS列はそのために設計されたものです。この種の効果のために列レイアウト内で通常ブロックレベルである要素を使用する秘訣はdisplay: inline-block、内部要素に適用することです。このようなものは、divを上から下、左から右に固定幅の小さいdivで埋めます。

CSS：

.columns div {
    width: 60px;
    height: 70px;
    background-color: blue;
    margin-bottom: 5px;
    display: inline-block;
}

.columns {
    overflow-x: scroll;
    padding: 5px 5px 0 5px;
    height: 242px;
    -moz-column-width: 65px;
    -webkit-column-width: 65px;
    column-width: 65px;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
    background-color: red;
}

そしてHTML：

<div class="columns">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
</div>

divがすべて同じ高さで、一貫した下部マージンが必要な場合、寸法は少し厄介になる可能性がありますが、それぞれのボックスサイズを合計することで、計算機を使用して数分で特定の状況を把握できます。エレメント。ボックスの高さが異なる場合は、ボックスの高さが含まれている要素と同じかそれよりも高くないことを確認してください。そうしないと、その内容が次の列に折り返されます。これは本当に正しい動作です（コンテンツを非表示にしたくないですよね？）が、少し見苦しいです。

これがその考えを示すフィドルです。

于 2013-03-20T21:13:15.303 に答える
0

まず、HTMLです。コンテナにIDを追加するだけで、簡単に参照を取得できます。

<div class="row show-grid" id="gridcontainer">
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
    ....
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
</div>

次にCSS。.span1見やすくするために、クラスに境界線と間隔を設定しました。

.span1 {
    width: 60px;
    border: solid 1px #ccc;
    padding: 20px;
}

.span1-nofloat {
    float: none;
}

.show-grid{
    max-height: 220px;
    overflow: auto;
    white-space: nowrap;
}

.show-column{
    display: inline-block;
    vertical-align: top;
}

最後に、javascript。これは、onloadイベントから実行するか、HTMLがロードされた直後に実行します。私はこれを一緒に投げたので、おそらく大幅に改善することができます：

var maxheight = 200;
var container = document.getElementById('gridcontainer');
var columns = [document.createElement('div')];
columns[0].className = 'show-column';
var currentcolumn = columns[0];
var currentheight = 0;
var count = container.childNodes.length;
for(var i=0;i<count;i++){
    var child = container.childNodes[0];
    var height = child.offsetHeight | 0;
    if(currentheight + height > maxheight){
        currentcolumn = document.createElement('div');
        currentcolumn.className = 'show-column';
        columns.push(currentcolumn);
        currentheight = 0;
    }
    currentcolumn.appendChild(child);
    currentheight += height;
}
container.innerHTML = '';
for(var j=0;j<columns.length;j++){
     container.appendChild(columns[j]);   
}

変数はコンテナのmaxheight最大の高さであり、JavaScriptではCSSよりも20px低く設定されているため、コンテナには水平スクロールバー用のスペースがあります。

ソリューションのJSFiddle：http: //jsfiddle.net/djBK3/

于 2013-03-20T20:27:36.253 に答える