Table自适应以及溢出的一些设置详解分享

4、双栏自适应cell部分连续英文符换行

  /*双栏自适应cell部分连续英文符换行*/  .cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }

注意跟普通的浮动不一样，浮动是环绕，这个是双栏。

代码：

  .cell{ display: table-cell; *display: inline-block;}

  <div class="fz">      <div style="width: 600px;" class="bg-grey p10">          <div>              <img src=" images/xxx.jpg" class="l p10" width="100">              <div class="cell">                  <p class="cell_bk">                      1977年的今天，28岁的拉齐奥中场球员Luciano Re Cecconi和两个朋友走入罗马的一家珠宝店。不知为何，他突然想来个恶搞玩笑。进入珠宝店后他就大喊，"别动！打劫！"他随后、也是最后的两句话是在珠宝店主冲出开枪命中他后说的，"It's a joke！It's a Joke！"30分钟后，他死了。                      <br/><br/>                      <span>//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>                      <h3>无处理</h3>                  </p>              </div>          </div>      </div>  </div>

效果：（兼容各浏览器）

当设置图片img的width为200的效果

注意：只能是两栏效果，三栏时ie6/7浏览器有问题。

对比float可以可以实现两栏效果，只是当图片宽度改变的时候不是自适应，需同时改变右边div的padding-left的值

  <img src=" images/xxx.jpg" class="l p10" width="200">        <div style="padding-left: 220px;">                <p class="cell_bk">   

到此这篇关于Table自适应以及溢出的一些设置详解的文章就介绍到这了,更多相关Table自适应以及溢出内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章，希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！

• 上一页
• 1
• 2