0

さて、これを説明するのは少し難しいです。基本的に、私はdivを相対的に配置し、絶対的に配置されたdivを保持しています。絶対位置に配置されたdivには、固定幅のdivが含まれ、フロートされます。これらの浮動divは、絶対親の幅を拡張する必要があります。

<div id="parent">
  <div id="stretchable-div">
    <div class="child">text</div>
    <div class="child">another text</div>
    <div class="child">more text</div>
  </div>
</div>

問題は、元の相対位置div幅が絶対divより小さい場合、これは機能しないことです。

例-http://jsfiddle.net/8JJSf/91/

jQueryで次の方法で実行できます。

$('.dropdown').each(function(index){
var sum = 0;
$(this).find('.half').each( function(){ sum += $(this).outerWidth(); });
$(this).width( sum );
});
4

1 に答える 1

1

位置を維持したい場合は、JavaScript を使用する必要があります。absolute

要素に位置を設定するabsoluteと、通常のページ フローの一部ではなくなるため、親は子のサイズ/位置を認識しません。

編集：これは、子に基づいて親のサイズを設定するjQueryコードです。最も幅の広い子とすべての子の高さに合わせて親を引き伸ばします。私はjQueryの専門家ではないので、より良い/簡単な方法があるかもしれません. 親の高さは、最初は 0px に設定する必要があります。

$('#stretchable-div').each(function() {
    var parentWidth = $('#parent').width(),
        parentHeight = $('#parent').height(),
        childW = $(this).width() + $(this).position().left;

    if (childW > parentWidth) {
      $('#parent').width(childW);   
    }

    $('#parent').height($('#parent').height() + $(this).height() + $(this).position().top);   

});

http://jsfiddle.net/WHV7M/

于 2013-03-06T02:24:30.940 に答える