CSS: 3列宽度不固定，中间一列需要居中

Question

好的，所以我到处搜索，但找不到类似的问题。我有 3 个带有文本的跨度，我需要文本的中间跨度始终在同一位置居中，左右两个跨度与此相关。通过单击左侧或右侧跨度，值会发生变化。

<div class="container">
  <span class="left">A</span>
  <span class="middle">B</span>
  <span class="right">C</span>
</div>

跨度都是动态的。中间跨度始终至少是一个字符，但可以是更多字符。左边和右边可以包含零个或多个字符。

我试过使用 flex-box，但我认为这对这种情况没有帮助。每次的问题是当左边或右边的值与值改变之前的字符数量不同时，中间的那个不在同一个位置而是跳来跳去。

我已经包含了一个问题的小例子。

var position = 1;

$('.left').click(function() {
  if (position == 1) {
    $('.left').text('');
    $('.middle').text('A');
    $('.right').text('B');
    position = 0;
  } else {
    reset();
  }
});

$('.right').click(function() {
  if (position == 1) {
    $('.left').text('B');
    $('.middle').text('C');
    $('.right').text('');
    position = 2;
  } else {
    reset();
  }
});

function reset() {
  position = 1;
  $('.left').text('A');
  $('.middle').text('B');
  $('.right').text('C');
}

.container {
  width: 200px;
  text-align: center;
  background-color: #eeeeee;
}

.container span {
  font-size: 2em;
}

.container span:nth-child(2) {
  font-size: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="left">A</span>
  <span class="middle">B</span> <!-- This needs to stay in the same spot -->
  <span class="right">C</span>
</div>

提前感谢您的帮助！

Answer 1

您需要定位左右元素并添加包装器。

首先，我们添加一个内部包装器，这样我们就可以使用相对于内部 div.

相对的绝对定位

现在我们将包装 div 设置为 inline-block 并将 text-align:center 应用到父级以使 div 居中。（当然还有其他居中方法）。

现在我们将左右 div 都设置为 position:absolute，这样它们的内容就不再影响流量了。

通过将 right:100% 应用到左侧 div 它将始终完全到达包装的右端 div.

相反的情况适用于右侧 div 得到 left:100%.

因为定位的 divs 会折叠到最小宽度，我们需要应用 white-space:nowrap 这样文本就不会在特定范围内换行。

.container {
  text-align: center;
  margin-bottom: 1em;
  background: #c0ffee;
}
.wrap {
  display: inline-block;
  background: pink;
  position: relative;
}
.left,
.right {
  position: absolute;
  top: 0;
  white-space: nowrap;
}
.middle {
  display: block;
}
.left {
  background: orange;
  right: 100%;
}
.right {
  background: red;
  left: 100%;
}

<div class="container">
  <div class="wrap">
    <span class="left">A</span>
    <span class="middle">B</span>
    <span class="right">C</span>
  </div>
</div>

<div class="container">
  <div class="wrap">
    <span class="left">A long long string</span>
    <span class="middle">BBBBB</span>
    <span class="right">Complex</span>
  </div>
</div>

CSS: 3列宽度不固定，中间一列需要居中

CSS: 3 columns not fixed in width, middle one needs to stay centered

html

css

styling