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

时间：2021-05-08

使用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完成左侧定宽，右侧定宽及左右定宽等布局的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

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

相关文章

css 多列布局解决方案

怎样平衡好页面布局与屏幕分辨率

JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

浅析两列自适应布局的3种思路

CSS三列布局的多种表现形式