table-cell实现宽度自适应布局

最新推荐文章于 2024-05-31 19:18:24 发布

weixin_30521649

最新推荐文章于 2024-05-31 19:18:24 发布

阅读量801

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/accordion/p/4142983.html

本文介绍如何利用table-cell属性实现元素的宽度自适应布局，并提供了具体的代码示例。文章还提到了table-cell的一些限制条件及IE6、7的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用table-cell可以实现宽度自适应布局。

table-cell有一些比较好用的属性，比如垂直居中，自适应高度宽度等，为元素设置table-cell布局之后，元素的margin失效，padding有效，

而且一旦元素设置了float或者absolute，则table-cell也会失效。

table-cell不兼容IE6,7.但是可以通过触发hasLayout来实现近似的效果。

以下可以实现宽度自适应布局：

<div class="wrapper">
        <img src="../../img/1.jpg" width="150">
        <span class=".table-cell">引语：最近在给学生讲解WEB前端开发的HTML和CSS基本知识，
            学生要面对“表单”的制作。我喜欢把“表单”称之为初入前端的人的“恶梦”。不得不说，表单这
            个东西在前端开发的时候，问题是相当之多的，从嵌套规则、书写习惯，到浏览器的兼容问题，
            有很多需要注意的地方。在此总结一下，以方便开发。</span>
 </div>


        
        .wrapper{background: #FFCCCC;overflow: hidden;zoom:1;min-width:400px;}
        img{float:left;}
        .table-cell{
            display: table-cell;
            *display: inline-block;
            width:3000px;
        }