深圳网站建站费用,wordpress自动取分类做菜单,东莞长安网红打卡地,苏州网站建设选苏州梦易行第一种#xff1a;浮动布局实现
HTML#xff1a; 这种方法我利用的就是浮动原理#xff0c;左右定宽度分别进行左浮动和右浮动#xff0c;此时主内容列#xff08;中间列没有定度#xff09;主会自动插入到左右两列的中间#xff0c;最要注意的一点是#xff0c;中间列…第一种浮动布局实现
HTML 这种方法我利用的就是浮动原理左右定宽度分别进行左浮动和右浮动此时主内容列中间列没有定度主会自动插入到左右两列的中间最要注意的一点是中间列一定要放在左右两列的后面如上面的html代码所示下面我们一起来看看其css样式是怎么实现的
CSS 效果如图 第二种负的margin实现
HTML: CSS: 这里先让’main’浮动因为浮动存在包裹性所以后面紧跟着width的100%来保证其充满整个body并且左右空出230px的距离预留给左右定宽的两列。’left’元素给予左浮动因为此时它已经被挤到第二行所以给予一个’margin-left’为负的100%让其向左偏移回到第一行且正好填补’main’留下的230px的定宽间距(注意这里margin-left/right的百分比都是根据父容器的宽度来决定)。那么’right’便是同样的道理
效果 第三种CSS3 Flexbox实现
HTML: CSS: 效果
