设置相同大小的其他元素与文本导致不同大小

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>