好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

两列布局中单列定宽单列自适应布局的5种思路_html/css_WEB-ITnose

× 目录 [1]float [2]inline-block [3]table [4]absolute [5]flex

前面的话

  说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute和flex这五种思路来详细说明如何巧妙地实现布局

思路一: float

  说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。如果各浮动元素的高度不同时,可能会出犬牙交错的效果

【1】float + margin

  将定宽的一列使用float,而自适应的一列使用计算后的margin

 p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{float: left;width: 100px;}    .right{margin-left: 120px;}  

left

查看更多关于两列布局中单列定宽单列自适应布局的5种思路_html/css_WEB-ITnose的详细内容...

  阅读:36次