Question

如何使两列具有相同的宽度。因为宽度是列的函数，具有更大的宽度。还有三分之一占据了“宽度”。

左，中和右列。我希望左列具有与右列相同的宽度。并且此宽度由带有更多文本的列的宽度给出。

示例：第LEFT栏，文字：ABCDEFGHIJK 该列有150像素 RIGHT栏，文字：ABC 此列有30px

我想要这个：

Column LEFT: 150px
Column CENTER: 100%
Column RIGHT: 150px

但是我不知道宽度。这是由具有更多文本然后具有更大宽度的列给出的。

如果LEFT大于RIGHT，则宽度RIGHT等于宽度LEFT。如果LEFT小于RIGHT，则宽度LEFT等于宽度RIGHT。

Answer 1

不确定是否有使用CSS的直接方法，但是一个想法是使文本在列方向上重复以确保宽度相同，然后隐藏其中之一。

我将使用CSS变量作为文本，以避免html代码中文本的重复：

.container {
  display: flex;
  min-height: 80px;
  margin: 5px;
}

.left,
.right {
  background: blue;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.middle {
  background: green;
  flex-grow: 1;
}

.left:before {
  content: var(--tl);
}

.right:before {
  content: var(--tr);
}


/*hidden text*/

.left:after {
  content: var(--tr);
  overflow: hidden;
  height: 0;
}

.right:after {
  content: var(--tl);
  overflow: hidden;
  height: 0;
}

<div class="container" 
  style="--tr:'some text';
         --tl:'mooooore text here'">

  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

<div class="container" 
  style="--tr:'a looooong text here !!!';
         --tl:'a text'">

  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS Grid / Flex：两列具有相同的宽度，一列具有自动宽度

1 个答案: