Question

我有一个父元素，然后是3个孩子。中心元素应位于中心，宽度为50像素，其他两个应占据剩余空间。由于响应式显示，父母的大小未知。如果这些孩子中没有文字，那么它看起来不错，但是当我把一些文字放在那里......好吧，它就被摧毁了。请注意，我想在纯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: 1，在中心div上设置flex: 0 0 50px。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: