Html 在遇到同级跨距时进行文本换行

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

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

我试图实现的是-在调整窗口大小时，在左跨线与右跨线相交时使其中断，并在发生这种情况时使右跨线垂直居中（因为容器div可能会获得一些额外的高度）。有什么想法吗

代码如下：

。定价{
宽度：100%；
背景：#333；
颜色：#fff；
溢出：隐藏；
}
.左{
浮动：左；
左边距：5px；
}
.对{
浮动：对；
右边距：5px；
颜色：#f6c42b；
}

哇，这里有很多文字
只是一个价格

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

.left
{
    width: 75%;
}

.right
{
    width: 25%;
}

---

这对我来说很有用。

Flexbox可以做到这一点，而您不需要浮动。其实,

。定价{
显示：flex；/*建立flex容器*/
对齐内容：之间的间距；/*对齐两端的子项*/
背景：#333；
颜色：#fff；
}
.左{
左边距：5px；
}
.对{
空白：nowrap；/*防止文本换行*/
自对齐：居中；/*垂直居中元素*/
右边距：5px；
颜色：#f6c42b；
}

哇，这里有很多文字
只是一个价格

您可以使用IE8+的浏览器支持来实现这一点

将容器设置为

display:table两列内为
显示：表格单元格；垂直对齐：中间对齐和
文本对齐：右侧；空白：nowrap位于右列

打开，调整结果面板的大小，然后查看


。定价{
显示：表格；
宽度：100%；
背景：#333；
颜色：#fff；
}
.左，.右{
显示：表格单元格；
垂直对齐：中间对齐；
填充：0 5px；
}
.对{
颜色：#f6c42b；
文本对齐：右对齐；
空白：nowrap；
}

哇，这里有很多文字
只是一个价格
这可能可行，但它不会使用所有可用空间，也可能会在视口变小时进行span.right换行。没错，但如果您想在小型设备中使用站点，则应使用（@media）