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/ ...
随机推荐
- ping: sendto: Network is unreachable
在我的板子上ping路由上的IP的时候可以ping通,但是ping外网的IP的时候提示"ping: sendto: Network is unreachable" 后来使用rout ...
- Android应用如何支持屏幕多尺寸多分辨率问题
作为Android应用程序开发者都知道android是一个“碎片化”的世界.多种系统版本.多种尺寸.多种分辨率.多种机型,还有不同的厂商定制的不同ROM,你开发的应用会在不可预期的手机上报错.这给开发 ...
- C# 通过WebService方式 IIS发布网站 上传文件到服务器
应用场景:要将本地的文件 上传到服务器的虚拟机上 网络环境:公司局域网(如下图中第二种) 开发环境:VS2010 服务器环境:WinServer2008 虚拟机环境:WinServer2008 ...
- 【转载】solr初体验
[1]http://cxshun.iteye.com/blog/1039445 由于工作原因,这段时间接触到solr,一个基于lucene的企业级搜索引擎.不怎么了解它的童鞋可以去GOOGLE一下. ...
- SQL语句中将Datetime类型转换为字符串类型
0 Feb 22 2006 4:26PM CONVERT(CHAR(19), CURRENT_TIMESTAMP, 0) 1 02/22/06 CONVERT(CHAR(8), CURRENT_ ...
- 一步一步实战扩展 ASP.NET Route，实现小写 URL、个性化 URL
介绍 不知道大家在使用 ASP.NET MVC 时有没有一些扩展要求,反正我是有很多.在使用 MVC 这几年(PS:我是从 1.0 开始学,2.0.3.0 开发至今),我深深地觉得 MVC 的扩展性真 ...
- Axure RP介绍
1.什么是原型设计?产品原型设计(Prototype Design)最基础的工作,就是结合批注.大量的说明以及流程图画框架图WireFrame,将自己的产品原型完整而准确的表述给 UI.UE.程序工程 ...
- 还在抱怨JS文件里没有智能提示吗， VS10以及以上都可以 .NET
1.打开JS文件 2.编写$.我们会发现什么也没有 3.托进来 4.有了哈 保存头部代码新建JS都贴上去.
- C语言中的经典例题用javascript怎么解？（一）
C语言中的经典例题用javascript怎么解?(一) 一.1+2+3+……+100=? <script type="text/javascript"> ...
- 点餐APP 冲刺二总结
冲刺二我们小组主要是实现数据库的增删改查等功能, 因为小组成员对数据库都不是很熟悉,所以花了比较多 的时间去学习,功能实现起来也是很艰难,所以第二个 冲刺结束后我们的数据库还是有点问题,不能成功 ...