Question

基本上，我有两个跨度元素：一个向左拉，第二个向右拉。

左边的那个更大，右边的那个应该只显示一个数字。

我想要实现的是 - 在调整窗口大小时，让左侧跨度线在遇到右侧跨度时断开，并在发生时垂直居中右侧跨度（因为容器div可能会获得一些额外的高度）。有什么想法吗？

以下是代码：http://www.jsfiddle.net/1db4trxo/5/

.pricing {
  width: 100%;
  background: #333;
  color: #fff;
  overflow: hidden;
}
.left {
  float: left;
  margin-left: 5px;
}
.right {
  float: right;
  margin-right: 5px;
  color: #f6c42b;
}

<div class="pricing">
  <span class="left"> Wow, there's kinda lot of text here </span>
  <span class="right"> Just a price </span>
</div>

Answer 1

Flexbox可以做到这一点，你不需要花车。实际上，floats are ignored in a flex container。

Revised Fiddle

.pricing {
    display: flex;                    /* establish flex container */
    justify-content: space-between;   /* align children at opposite ends */
    background: #333;
    color: #fff;
}

.left {
    margin-left: 5px;
}

.right {
    white-space: nowrap;             /* prevent text from wrapping */
    align-self: center;              /* center element vertically */
    margin-right: 5px;
    color: #f6c42b;
}

<div class="pricing">
  <span class="left"> Wow, there's kinda lot of text here </span>
  <span class="right"> Just a price </span>
</div>

Answer 2

您可以使用浏览器支持IE8 +的CSS table进行此操作。

将容器设置为display: table;两列，其中display: table-cell; vertical-align: middle;和text-align: right; white-space: nowrap;位于右列。

打开 jsFiddle ，调整结果面板的大小并查看。

.pricing {
  display: table;
  width: 100%;
  background: #333;
  color: #fff;
}
.left, .right {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
}
.right {
  color: #f6c42b;
  text-align: right;
  white-space: nowrap;
}

<div class="pricing">
  <span class="left"> Wow, there's kinda lot of text here </span>
  <span class="right"> Just a price </span>
</div>

Answer 3

您应该设置两个内部div的宽度像这样

.left
{
    width: 75%;
}

.right
{
    width: 25%;
}

这对我有用。

在遇到兄弟跨度时进行文本换行

3 个答案: