table-cell完成左侧定宽，右侧定宽及左右定宽等布局的如何实现方法

秋天是收获的季节。柿子树上缀满了小红灯笼似的柿子，沉甸甸的，把枝头都压弯了。枫树的叶子火红火红的，像一堆正在燃烧的火焰。那梧桐树的枯叶在秋风中纷纷飘落下来，像翩翩起舞的金色蝴蝶。

使用table-cell完成以下几种布局（ie8及以上兼容）

1、左侧定宽-右侧自适应

XML/HTML Code复制内容到剪贴板

.left{
width:300px;
height:500px;
border:1pxsolid;
float:left;
}
.right{
width:10000px;
height:500px;
display:table-cell;
border:1pxsolid;
}
</style>
<divclass="left"></div>
<divclass="right">
Loremipsumdolorsitamet,consecteturadipisicingelit.Beataedoloreestetitaquenesciuntnobisofficiaomnisoptiosimiliquevitae.Cupiditateeumexercitationemharumidiustomaioresquaeratreprehenderitsint.
</div>

效果如下：

（调整窗口大小，来测试右侧是否根据窗口大小改变）

2、右侧定宽-左侧自适应

XML/HTML Code复制内容到剪贴板

<style>
.right{
width:200px;
height:500px;
border:1pxsolid;
display:table-cell;
}
.left{
height:500px;
border:1pxsolid;
display:table-cell;
}
.parent{
display:table;
table-layout:fixed;
width:100%;
}
</style>
<divclass="parent">
<divclass="left">
Loremipsumdolorsitamet,consecteturadipisicingelit.Ametaperiam,assumendadoloreseaque,fugiatillo,ininventoreitaquemagninemonisinullaobcaecatiquaerattotamundevoluptatemvoluptatum.Amet,totam.
</div>
<divclass="right"></div>
</div>

效果如下：

与左侧定宽稍有不同，虽然只是定宽的位置换了，但是不能直接使用浮动像左侧定宽那种方式完成。

3、左右定宽-中间自适应

XML/HTML Code复制内容到剪贴板

<style>
.parent{
display:table;
table-layout:fixed;
width:100%;
}
div{
border:1pxsolid;
}
.left,.right,.center{
display:table-cell;
}
.left{
width:100px;
height:200px;
}
.right{
width:100px;
height:200px;
}
</style>
<divclass="parent">
<divclass="left"></div>
<divclass="center">
　　Loremipsumdolorsitamet,consecteturadipisicingelit.Aliasametdelectusducimuseaeoseum,liberomodiquia,solutatemporibusunde,
　　　　　　ut.Aliquam,doloremipsamporroquaequisquamsaepevitae!
</div>
<divclass="right"></div>
</div>

效果如下：

以上这篇table-cell完成左侧定宽，右侧定宽及左右定宽等布局的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

全站频道