一.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