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/ ...
随机推荐
- Vbox如何修改虚拟机器的uuid
先是 X: 然后cd X:\Program Files\VirtualBox 然后是 VBoxManage internalcommands sethduuid "X:\Progra ...
- google全球地址大全
https://github.com/justjavac/Google-IPs http://www.aol.com/依托于google的一个搜索,通过这个搜索
- 如何复制DataRow（dataTabel中的行）
由于需要对dataTabel中的行进行上移和下移操作: row 1 行号0 row2 行号1 row3 行号2 例如将row3上移一行,即row2和row3对调位置. ...
- 指定的参数已超出有效值的范围 参数名: utcDate WebResource异常
指定的参数已超出有效值的范围.参数名: utcDate 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息 ...
- Caching查看窗口
闲来无事,做了一个简约的Caching查看窗口,可以方便的查看本地缓存的使用情况: 下面的URL和VersionNum用来查看某个特定资源的特定版本是否存在,分别输入所需信息,点击“检测”,即可在下面 ...
- [Design Patterns] 3. Software Pattern Overview
When you're on the way which is unknown and dangerous, just follow your mind and steer the boat. 软件模 ...
- multi-CPU, multi-core and hyper-thread--转
原文地址:http://stackoverflow.com/questions/680684/multi-cpu-multi-core-and-hyper-thread Multi-CPU was t ...
- JS数组追加数组采用push.apply的坑
JS数组追加数组没有现成的函数,这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的,不需要写for循环的写法,一直也没遇到什么问题,直到今天我要append的b是个很大的数组时 ...
- ASP.NET 为GridView添加序号列，且支持分页连续累计显示
为GridView添加序号列,且支持分页连续累计显示,废话不多说,直接上代码: <%@ Page Language="C#" AutoEventWireup="tr ...
- django book 阅读笔记
一,django是一个十分优秀的python web的框架,那框架的是什么? 假设我们不使用框架来进行编写,我们要用如下的代码进行web脚本: #!/usr/bin/env python import ...