龙空技术网

「多列布局」如何搞定宽加自适应的CSS布局情况(上)

小郑搞码事 232

前言:

当前小伙伴们对“css定宽高”大概比较珍视,姐妹们都想要剖析一些“css定宽高”的相关内容。那么小编在网络上收集了一些有关“css定宽高””的相关知识,希望各位老铁们能喜欢,各位老铁们一起来了解一下吧!

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

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

本篇用的demo的结构:

方法一:使用float加overflow

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

效果图似乎可以想象:

方法二、使用float加marign

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

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

先小结一下吧:

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

标签: #css定宽高