基本上,我有两个 span 元素:一个向左拉,第二个向右拉。
左边的更大,右边的应该只是显示一个数字。
我想要实现的是 - 在调整窗口大小时,让左跨度线在遇到右跨度时断开,并在它发生时将右跨度垂直居中(因为容器 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>
最佳答案
Flexbox 可以做到这一点,而且你不需要 float 。事实上,floats are ignored in a flex container .
.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>
关于html - 当遇到兄弟跨度时使文本换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38276474/