Question

Oke所以我已经搜索过高低，但我找不到类似的问题。我有3个跨度的文本，我需要文本的中间跨度始终在同一个点中心，左右相对于那个。通过单击左侧或右侧跨度，值将更改。

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

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

我尝试使用flex-box，但我不认为这会对这种情况有所帮助。每次问题都是中间的一个不是在同一个地方，而是当左边或右边的值与值变化前的字符数量不同时跳转。

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

＆＃13;

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');
}

＆＃13;

.container {
  width: 200px;
  text-align: center;
  background-color: #eeeeee;
}

.container span {
  font-size: 2em;
}

.container span:nth-child(2) {
  font-size: 3em;
}

＆＃13;

<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>

＆＃13;

提前感谢您的帮助！

Answer 1

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

首先，我们添加一个内部包装器，以便我们可以使用 relative 的绝对定位到该内部div。

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

现在我们将左右div分别设置为position:absolute，以便其内容不再影响流量。

通过将right:100%应用于左侧div，它将始终完全位于包装div的右端。

反过来适用于得到left:100%.

的右边div

因为定位的div会崩溃到最小宽度，我们需要使用white-space:nowrap，因此文本不会在特定范围内包裹。

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS：3列未固定宽度，中间列需要保持居中

1 个答案: