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>
2.左侧定宽，右侧自适应
方法一：
right相对父元素使用absolute定位并设置margin-left，需要注意：固定宽的列的高度>自适应宽度列的高度
代码如下：
方法二：
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;
}
CSS布局——横向两列布局的更多相关文章
- 盒子模型、网页自动居中、float浮动与清除、横向两列布局
1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- css布局之两列布局
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- html笔记 横向两列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- mycat配置日志
1: 1: MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' ...
- composer 安装使用
首先开启 php.ini ssl配置. 然后通过如下地址下载对应安装包安装即可:http://www.phpcomposer.com/ 当然如果安装失败,也可以下载 composer.phar 包 命 ...
- 【weka应用技术与实践】过滤器
weka中的过滤器主要用于数据预处理阶段对数据集的各种操作. 今天简单地使用一下过滤器: 首先打开一个自带数据集weather.numeric.arff,这是一个关于通过天气条件,气温以及风力等因素来 ...
- JavaScript备忘录(1)——内置类型
JavaScript有一些内置类型,还有很多常用的内置的方法,本文稍作总结,以备查阅. 值类型 我的理解,值类型是分配在栈上的,而引用类型(当然也包括引用类型内部的值类型)是分配在堆上的.值类型是不可 ...
- ORA-12170：TNS：连接超时
本文转自 http://www.cnblogs.com/kerrycode/archive/2012/12/14/2818421.html 1:首先检查网络是否能ping通 2:检查TNS配置(TNS ...
- HTML5[3]:中文换行
保证中文每行第一个字,不会出现标点符号 p { white-space: pre-wrap; }
- Android通过编码实现GPS开关
在Android 2.2以后才可使用 import android.content.ContentResolver; import android.content.Context; import an ...
- statpot:使用mongo+bootstrap+highcharts做统计报表
最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现 最初的时候想着每天把这些接口访问 ...
- Jquery对象，DOM对象
jquery对象就是通过Jquery包装Dom对象后产生的对象,Dom对象想要通过jquery进行操作,先转换为jquery对象: dom对象转化为jquery对象,使用$(dom对象): jquer ...
- MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页
系列教程:MVC5 + EF6 + Bootstrap3 上一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面 源码下载:点我下载 我工作的源码:http://www.jin ...