設置相同大小的其他元素與文本導致不同大小

Question

我有一個父元素，然後3個孩子。中心元素應位於中心，寬度爲50 px，其他兩個應占用剩餘空間。家長的大小是未知的，因爲響應顯示。如果這些孩子沒有文字，那麼它看起來不錯，但是當我在那裏放置一些文字時......它就被摧毀了。請注意，我想在純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左右股利和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>