点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

前面搞定了居中布局的一些常用的方法,分水平居中和垂直居中,今天开始来给大家总结一下有关多列布局中定宽加自适应情况的几种常见的CSS处理方法 。

本篇用的demo的结构:

方法一:使用float加overflow

左边的框使用float=left,让其左浮,右边框使用overflow来清除浮动,处理内容溢出的问题,代码如下:

效果图似乎可以想象:

方法二、使用float加marign

通过将左框脱离文本流,加上右框向右移动一定的距离,以达到视觉上的多列布局。这个也非常容易理解,相信大家也经常使用,我也给大家列一下代码:

效杲图和上面方法一输出的是一样的。这个方法的好处就是简单非常容易理解。

先小结一下吧:

这篇说的是定宽加自适应布局的处理办法,列出的两种方法应该是最最简单的,相信大家都用过,当然处理定宽加自适应还可以使用table,使用flex等方法,下篇给大家列出来。见(下)。

1.《css如何让宽度自适应、css自适应高度宽度》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《css如何让宽度自适应、css自适应高度宽度》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/keji/3263890.html