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/ ...
随机推荐
- iOS开发- Xcode 7添加pch文件
1.打开你的Xcode工程. 在Supporting Files目录下,选择 File > New > File > iOS > Other > PCH File 然后点 ...
- 许可EDM营销是个长期过程
为什么这么说呢?基于博主自己这三四年的理解,许可EDM营销确实是个长期的过程,这跟一般的EDM营销有一定的区别. 大多数时候不会有立竿见影的效果,而且需要持续地不间断地进行到底,这也是很多企业实施许可 ...
- Android 使用NDK编译sipdroid Library
sipdroid是一款开源的运行于Android平台上的voip,目前支持音频和视频通话: 项目拖管地址:http://code.google.com/p/sipdroid/ 下载源代码,导入ecli ...
- tomcat的网站屏蔽IP的方法
<Host> <Valve className="org.apache.catalina.valves.RemoteAddrValve" deny=" ...
- 解决方法:64位系统-未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
win7或win8 64位下调试程序,出现这样的错误提示:未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0 提供程序 解决方法如下: 方法一:“设置应用程序池默认属性”/“常规”/ ...
- 2014-09-19.xml
<wordbook><item> <word>basel</word> <trans><![CDATA[ n. 巴塞尔( ...
- Eclipse项目名出现红叉
一.背景与原因 项目第一次加进来的时候,我用的是D:\Java\jdk1.7.0_17,后来由于配置将tomcat切换到jboss,说是JBOSS某个版本只支持jdk6,我就将“环境变量JAVA_HO ...
- hdu 2152
题目大意:本题是中文题.读者可以直接到OJ上去阅读.提议并不难理解 代码如下: /* * 2152_1.cpp * * Created on: 2013年8月9日 * Author: Administ ...
- c# File 操作
//1.---------文件夹创建.移动.删除--------- //创建文件夹 Directory.CreateDirectory(Server.MapPath("a")); ...
- TogetherJS – 酷！在网站中添加在线实时协作功能
TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...