总结几种实现右边宽度固定,左边宽度自适应的css布局

一.display:table-cell的应用

首先是简单的html:


下面是css代码:          

总结几种实现右边宽度固定,左边宽度自适应的css布局_第1张图片

以下是效果图:

总结几种实现右边宽度固定,左边宽度自适应的css布局_第2张图片

必须注意的是,左侧div必须设置超过父元素减去右侧元素的宽度   

但是这个方法会产生一个问题,它会使左边的div高度等于右侧div的高度

 二.flex布局

同样使用上面的htmldai'ma


下面是css代码

总结几种实现右边宽度固定,左边宽度自适应的css布局_第3张图片

效果图如下:

总结几种实现右边宽度固定,左边宽度自适应的css布局_第4张图片

可以看到左侧的没有设置宽度,但是却跟右侧的宽度一致,实现了宽度自适应


方法三.应用float和margin

以下是html代码,与上面有所不同的是,书写代码的时候,right代码在前面

总结几种实现右边宽度固定,左边宽度自适应的css布局_第5张图片

以下是css代码:

总结几种实现右边宽度固定,左边宽度自适应的css布局_第6张图片

效果如下:


如图,左侧div并没有设置width值,但是已经实现了自适应,撑满了父元素所剩下的宽度。

以上就是自己学习和总结的所有办法,希望对大家有所帮助。

你可能感兴趣的:(css)