CSS布局——横向两列布局

1.固定两栏布局，使用float，注意对紧邻元素清除浮动影响。IE6在使用float布局同时设置横行margin的情况下会有双边距BUG，解决方案是加入_display:inline

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>横向两列布局</title><style type="text/css" >body{padding:0;margin:0;}.wrapper{width: 960px;margin:0 auto;}.header {height: 75px;background-color: #BD9C8C;margin-bottom: 5px;}.left{width: 340px;height: 600px;margin-right: 20px;_display:inline;/*IE6双边距BUG*/float: left;background-color:#E7DBD5;}.right{width: 600px;height: 600px;_display:inline;/*IE6双边距BUG*/float: left;background-color: #F2F2E6;}.footer {clear: both; /*清除浮动，非常重要，不可缺少*/background-color: #BD9C8C;margin-bottom: 5px;}</style>
</head>
<body>
<div class="wrapper"><div class="header"><h1>Header</h1></div><div class="left"><h2>left</h2></div><div class="right"><h2>right</h2></div><div class="footer"><h2>Footer</h2></div>
</div></body>
</html>

View Code

2.左侧定宽，右侧自适应

方法一：

right相对父元素使用absolute定位并设置margin-left，需要注意：固定宽的列的高度>自适应宽度列的高度

代码如下：

View Code

方法二：

float和overflow配合可实现两列自适应效果，兼容IE6-浏览器需要设置zoom:1

        .container{overflow: hidden;}.left{margin-right: 20px;float: left;width: 340px;height: 500px;background-color:#E7DBD5;}.right{overflow: hidden;background-color: #F2F2E6;}

View Code

转载于:https://www.cnblogs.com/czzaiba/p/5703905.html

CSS布局——横向两列布局相关推荐

常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
CSS布局之两列布局
两列布局两列布局一般情况下是指定宽与自适应布局,两列中左列是确定的宽度,右列是自动填满剩余所有空间的一种布局效果: 左列自适应, 右列定宽 float + margin 属性实现: float + ...
bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
单列布局、两列布局、三列布局
一. 单列布局 HTML 代码: 1 <div id="header"> 2 <h2>Page Header</h2> 3 < ...
div+css经典三行两列布局
写在前面在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
CSS 垂直居中、多列布局
阅读目录垂直居中基本实现思路单列布局示例网站两列布局示例网站两列布局的实现第 1 步,写好 HTML 结构.这里为了查看方便,我们为布局容器设置背景颜色和高度. 第 2 步,将布局容器 ...
css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

CSS布局——横向两列布局

CSS布局——横向两列布局相关推荐

最新文章

热门文章