2

次のような他のいくつかのインラインブロック要素を持つインラインブロックコンテナーがあります。 働くように

コンテナーは青色の背景、赤色は要素です。要素が多すぎてインラインブロックを拡張する必要があるまで、すべてが正常に機能しています。 働いていないとして

インライン ブロック コンテナーは、本体の幅全体に拡張されますが、内容の幅に合わせて縮小したいと考えています。これは純粋なCSSで可能ですか? このようなちょっと： 動作させたいので

JSFiddle

        #container {
            background: blue;
            display: inline-block;
        }

        .box {
            background: red;
            display: inline-block;
            width: 100px;
            height: 100px;
        }

ああ、コンテナは固定幅にすることはできません:(

4

1 に答える 1

3

あなたが探しているのは、ウィンドウのサイズに応じて別のボックスが収まる/収まらない場合にのみコンテナのサイズを変更する、このようなものだと思います。CSS は動的コンテンツに基づいてセグメント (ボックスの全幅) で縮小できないため、この機能は現在のところ純粋な CSS では使用できません。

CSS

#container {
    background:blue;
    text-align: left;
    font-size:0;
    display: inline-block;
    padding-left:5px;
    padding-bottom:5px;
    /* for ie6/7: */
    *display: inline;
    zoom:1;
}
.box {
    display:inline-block;
    background:red;
    height:50px;
    margin-top:5px;
    margin-right:5px;
    width: 100px;
    height: 100px;
}

そして純粋なJavaScript

var boxAmount = 0;
var newWidth = 0;
setNewWidth();

window.onresize = function () {
    setNewWidth();
};

function setNewWidth() {
    var outerContainer = document.getElementsByTagName('body')[0];
    var outerWidth = outerContainer.offsetWidth;
    var box = document.getElementsByClassName('box');
    var boxWidth = box[0].offsetWidth;
    var innerContainer = document.getElementById('container');
    var containerPadding = parseInt(window.getComputedStyle(innerContainer, null).getPropertyValue('padding-left'), 10) 
    +  parseInt(window.getComputedStyle(innerContainer, null).getPropertyValue('padding-right'), 10);

    boxAmount = (outerWidth - containerPadding) / (boxWidth + containerPadding);
    boxAmount = Math.floor(boxAmount);
    if (boxAmount <= box.length) {
        newWidth = boxAmount * boxWidth + boxAmount * 5;
    }
    innerContainer.style.width = newWidth + 'px';
}

ボックスの周りに別のコンテナがある場合のバージョンは次のとおりです

興味のある方はjQuery版をどうぞ

于 2013-08-05T23:21:41.857 に答える