javascript - コンテンツに基づいてラッパーの幅を取得および設定します

Question

私は次の設定をしています：

<div id="wrapper">
    <div class="column1"></div>
    <div class="column3"></div>
    <div class="column2"></div>
</div>

#wrapper {
    position:absolute;
}

すべての「列」には異なる幅とfloat: left. したがって、3 つの列を合わせると、幅が 900 ピクセルになります。しかし、新しい列を配置すると、ラッパーが自動的に取得するようにします。

そこで、JavaScript を使用して、ラッパーに含まれる列に基づいてラッパーの幅を取得および設定したいと考えています。

Answer 1

フロートは使用しないでくださいdisplay:inline-block( Demo )

Answer 2

$("#wrapper").width(function() {
    var width = 0;
    $(this).children('[class^="column"]').each(function() {
        width += $(this).width();
    });
    return width;
});​

Answer 3

これがフィドルです：http：//jsfiddle.net/BramVanroy/sYMLr/

var totalWidth = 0;
$("div#wrapper > div").each(function(index) {
    totalWidth += parseInt($(this).outerWidth(true), 10);
});

$("div#wrapper").width(totalWidth);​

Answer 4

var w = 0;
$('#wrapper > div').each(function(index) {
  w += $(this).outerWidth();
});
$('#wrapper').width(w);