zoukankan      html  css  js  c++  java
  • 多语言样式容器内容超出父级宽度不换行显示

    一个经典的左右浮动布局;

    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    wrap层宽度为1000px;

    在英文布局下,左右浮动计算好宽度或者不给宽度,都没问题,但是项目引进了多语言翻译后,遇上俄语,法语,意大利语这些单词词组比较长的时候,就会出现left层加上right层的总宽度超过wrap层的情况,然后right层就会有跳行的BUG;

    BOSS希望是不要换行,经过测试后,发现这样一种奇怪的布局方式:

    wrap层宽度1000px不变;

    left层浮动;

    right层不浮动,右对齐,子元素不给宽度,用inline-block + IE hack兼容IE,加不换行代码:white-space: nowrap;

    这样布局后,left层 + right层总宽度超出wrap层的宽度后,right层内容会被推出去,超出wrap右边,继续不换行显示;

    right层css:

    .right{ color:#ffffff; line-height:38px; text-align: right; white-space: nowrap;}
  • 相关阅读:
    11.06第十次作业
    (构造方法私有化、this)10.29练习题
    10.23创造人
    10.16(RuPeng)游戏
    10.09
    作业9.25
    练习题
    (随机数之和)求一整数各位数之和1636050052王智霞
    两点之间的距离1636050052王智霞
    TabLayout 简单使用。
  • 原文地址:https://www.cnblogs.com/3box/p/4968655.html
Copyright © 2011-2022 走看看