子要素が別のdivの幅に一致するように空白を埋めよう

Question

テキストまたはボタンがvw単位であるため可変兄弟であるような2つのdivがある場合、どのようにして空白を均等に埋めることができますか最初の兄弟divの幅に一致しますか？

<div id="a"><p>The quick brown fox jumps over the lazy dog</p></div> 
<div id="b"><button>quick</button><button>fox jumps</button><button>dog</button></div> 

Iは width:max-content;各DIVを設定し、各ボタンの左右のパディングにそれぞれ1/6ピースを与え、 $('#a').width()-$('#b').width()の差分を取り、6で除算するようにjQueryを使用することによってこれを行うことを試みました。しかし、それはうまくいかないようでした。

私は上記のHTML構造を維持したいと思いますが、段落とボタンを1つのdivに入れ、段落を100％に設定し、各ボタンを33.33333％の幅に設定します。しかし、別の方法がありますか？

私はflexboxがflex-growと考えていましたが、私はこのようなものにflexboxを使う必要はありませんか？

私がしようとしていることを行うための適切かつ堅牢な方法は何ですか？

Answer 1

その後、flex-grow: 1にボタンを設定するか、短縮形を使用して、要素の幅試合をするためにjQueryのを使用することができます。

$('#b').width($('#a').width());

div { 
 
    float: left; 
 
    clear: both; 
 
    background: #eee; 
 
    margin: 0 0 1em; 
 
} 
 

 
#b { 
 
    display: flex; 
 
} 
 
button { 
 
    flex: 1 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a"> 
 
    <p>The quick brown fox jumps over the lazy dog</p> 
 
</div> 
 
<div id="b"><button>quick</button><button>fox jumps</button><button>dog</button></div>

それとも最初の行は、常に長い第2のラインよりもあることを行っている場合、あなたはそれの要素にし、どちらかfloat両方それらをラップすることができたりするようdisplay: inline-blockまたはposition: absoluteに設定それが100％幅でない場合は、#bをフレックス・ペアレントにして、buttonをflex-grow: 1に設定するか、省略記号を使用してください。

div { 
 
    background: #eee; 
 
    margin: 0 0 1em; 
 
} 
 

 
section { 
 
    display: inline-block; 
 
} 
 

 
#b { 
 
    display: flex; 
 
} 
 
button { 
 
    flex: 1 0 0; 
 
}

<section> 
 
    <div id="a"> 
 
    <p>The quick brown fox jumps over the lazy dog</p> 
 
    </div> 
 
    <div id="b"><button>quick</button><button>fox jumps</button><button>dog</button></div> 
 
</section>

Answer 2

私が思いつくのは、浮動小数点型のdivにすべてをラップすることです。

button { 
 
    width: 33.33%; 
 
} 
 

 
.test { 
 
    float: left; 
 
}

<div class="test"> 
 
<div id="a"><p>The quick brown fox jumps over the lazy dog</p></div> 
 
<div id="b"><button>quick</button><button>fox jumps</button><button>dog</button></div> 
 
</div>