Skip to content

Instantly share code, notes, and snippets.

@cuber
Last active August 29, 2015 13:59
Show Gist options
  • Save cuber/10714968 to your computer and use it in GitHub Desktop.
Save cuber/10714968 to your computer and use it in GitHub Desktop.
<style>
span { display: inline-block; }
#left { text-align: left; }
#right { text-align: right; }
</style>
<div style="width: 100px; height: 30px; overflow:hidden; ">
<span id="left"></span>
<span id="right"></span>
</div>
/* 条件 */
#left 与 #right 的父元素, 定宽定高
#left 与 #right 都是不确定长度的纯文字
/* 预期 */
#right 需要完整显示
#left 需要将 #right 未填充满的部分填充满, 超出部分 text-overflow
/* 例如 */
<---------------->
|asdfasdfas...|V5|
<---------------->
|asdfasdf...|V5V6|
<---------------->
/* answer */
经过@P233指点
将#left写在#right后面, 通过浮动#right, 让#left自动计算右侧margin即可
<style>
span { display: inline-block; }
#left { text-align: left; overflow: hidden; }
#right { text-align: right; float: right; }
</style>
<div style="width: 100px; height: 30px; overflow:hidden; ">
// 注意不要有换行符, 不然出现inline-block的3px
<span id="right"></span><span id="left"></span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment