0

私は現在、さまざまな位置にあるアイテムの「直線」行をフローティングしています。左 - すべてのスペースを占める左外側から本体の右外側に移動します。

現在の私の問題は、100% ボディの「コンテナ」に収まりきらないほど多くのアイテムを追加したため、フローティング アイテムが自然にラインを壊してしまうことです。

ただし、私が達成しようとしているのは、アイテムが何らかのオーバーフロー: 非表示の状態 (および分解しない) になり続けて、基本的にラインを壊すことなくアイテムを追加し続けることができるようにすることです。

私のHTMLは基本的に次のとおりです-問題はここでも見ることができます:

#lights {
    position: absolute;
    z-index: 999;
overflow: hidden;
}

.lightItem {
    float: left;
}

// ** I basically repeat this pattern in the straight line  // *
.lightItem.c1Light_1 {
    padding: 38px 0 0 42px;
}

.lightItem.c1Light_2 {
    padding: 37px 0 0 82px;
}

.lightItem.c1Light_3 {
    padding: 46px 0 0 59px;
}
4

2 に答える 2

0

まあ、1つのトリックは、それを異なる（より広い）幅のdivにラップし、ライン要素でオーバーフローを非表示にすることです。必要に応じて調整できます.cの本当に簡単な例です。私はかなり怠け者なので、私はしませんでしたすべてのブラウザで試してください。

<html>
<head>
    <style>
        #main_wrapper
        {
            width: 960px;
            height: 200px;
            overflow: hidden;
            margin: auto;
        }

        #main_wrapper .overflow_line
        {
            width: 300%;
            height: 200px;
            clear: both;
            border: 1px solid #d3d3d3;
        }

        #main_wrapper .overflow_line > div
        {
            float: left;
            width: 100px;
            height: 120px;
        }

    </style>

</head>
<body>
    <div id="main_wrapper">
        <div class="overflow_line">
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
            <div>a</div>
        </div>
    </div>
</body>

于 2013-04-22T16:39:09.993 に答える