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

一.display:table-cell的应用

首先是简单的html：

下面是css代码：

以下是效果图：

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

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

二.flex布局

同样使用上面的htmldai'ma

下面是css代码

效果图如下：

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

方法三.应用float和margin

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

以下是css代码：

效果如下：

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

以上就是自己学习和总结的所有办法，希望对大家有所帮助。
————————————————
版权声明：本文为CSDN博主「weixin_34364979」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_34364979/article/details/79476865