`
liuguofeng
  • 浏览: 435316 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

CSS实现二列等高布局及右边自适应宽度

    博客分类：
  • css
阅读更多 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	width: 100%;
	height: 100%;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
fieldset,img { border:0 }
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }
.lc { margin: 0 auto; }
.fl, .il .fl { float: left; }
.fr, .il .fr { float: right; }
.fc, .il .fc { float: none; clear: both; }
.rel { position: relative; }
.abs { position: absolute; }
.il { list-style: none; }
.il li { float: left; }

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}

 
 
.container{ width:100%; overflow:hidden; } .header { background: #aaa; height: 66px; } .content{ overflow: hidden; } .aside{ float: left; width: 200px; background: #eee; } .main{ margin-left: 200px; background-color: #ddd; }

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>业务管理</title>
 <link rel="stylesheet" href="css/reset.css">
 <link rel="stylesheet" href="css/index.css">
</head>
<body>
 <div class="container">
  <div class="header">
   header
  </div>
  <div class="content clearfix">
   <div class="aside">
    aside
   </div>
   <div class="main">
    aside
   </div>
  </div>
 </div>
</body>
</html>

 

 

分享到：
| 关于CSS浮动以及清除浮动的几种方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics