div css左右佈局例項程式碼

admin發表於2017-02-21
CSS

左右佈局是最基本的佈局之一，可以說絕大部分網站在導航欄以下都會分為左右兩個部分，下面就給出一個左右佈局的最簡化的例子，可能對初學者有所幫助，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>左右佈局例項-螞蟻部落</title>
<style type="text/css">
html, body{
  margin:0px;
  padding:0px;
  height: 100%;
}
.head{
  background:black;
  color:white;
  height:48px;
}
.all{overflow:hidden}
.leftside{
  background:#E6E6E6;
  float:left;
  height:100px;
  width:200px;
  margin:0px;
  overflow-y:auto;
}
.rightside {
  background:blue;
  height:100px;
  width:100%;
  align:right;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="all">
  <div class="leftside"></div>
  <div class="rightside"></div>
</div>
</body>
</html>

相關閱讀:

1.float屬性可以參閱CSS float一章節。

2.清除浮動可以參閱CSS的清除浮動一章節。

相關文章