異なるサイズのテキストを含む他の要素に同じサイズを設定する

Question

私は親要素を持ち、次に3つの子要素を持っています。センター要素は中央に配置し、幅は50ピクセル、残りの2つは残りの領域を取る必要があります。レスポンシブルディスプレイのため、親のサイズは不明です。これらの子供たちにテキストがない場合、それは見栄えがいいですが、そこにテキストを置くと...よく、それは破壊されます。純粋なCSSで作成したいと考えています。

問題：赤と青の幅が同じである必要があります。

.parent { 
 
    display: table; 
 
    width: 100%; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
} 
 
.left, .center, .right { 
 
    display: table-cell; 
 
    height: 150px; 
 
} 
 
.left { 
 
    background-color: rgb(199, 60, 60); 
 
} 
 
.center { 
 
    width: 50px; 
 
    background-color: rgb(60, 199, 96); 
 
} 
 
.right { 
 
    background-color: rgb(60, 122, 199); 
 
}

<div class="parent"> 
 
    <div class="left">Some text</div> 
 
    <div class="center"></div> 
 
    <div class="right">There is much more text</div> 
 
</div>

Answer 1

あなたはFlexboxを使用して、左右のdivと中央のdivにflex: 0 0 50pxにflex: 1を設定することができます。

.parent { 
 
    display: flex; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
} 
 
.left, 
 
.center, 
 
.right { 
 
    height: 150px; 
 
} 
 
.left { 
 
    background-color: rgb(199, 60, 60); 
 
    flex: 1; 
 
} 
 
.center { 
 
    flex: 0 0 50px; 
 
    background-color: rgb(60, 199, 96); 
 
} 
 
.right { 
 
    background-color: rgb(60, 122, 199); 
 
    flex: 1; 
 
}

<div class="parent"> 
 
    <div class="left">Some text</div> 
 
    <div class="center"></div> 
 
    <div class="right">There is much more text</div> 
 
</div>