要求： 根據屏幕寬度，實現兩個div並排顯示
直接展示源碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮動模型</title>
<style type="text/css">
#div1{
width:50%;
height:400px;
float:left;
background:red;
}
#div2{
width:50%;
height:400px;
float:right;
background:yellow;
}
</style>
</head>
<body>
<div id="div1">欄目1</div>
<div id="div2">欄目2</div>
</body>
</html>
顯示效果：
，，，現在有沒有發現沒有設置border,,,當你給左右設置border時候，會發現黃色會顯示到下面來，，，怎麼回事呢？
這主要是盒子模型吧，當float左邊50% +border之後，右邊的50%就不夠顯示了，然後float自動就顯示到下一行中，。。。解決辦法直接看下面的源碼吧：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative樣式</title>
<style type="text/css">
.class{
}
#div1{
width:50%;
height:400px;
border:1px red solid;
box-sizing:border-box;
background-image:url("http://pic6.huitu.com/res/20130116/84481_20130116142820494200_1.jpg");
float:left;
text-align:center;
line-height:400px;
color:red;
}
#div2{
width:50%;
height:400px;
border:1px red solid;
box-sizing:border-box;
background-image:url("http://pic6.huitu.com/res/20130116/84481_20130116142820494200_1.jpg");
float:right;
text-align:center;
line-height:400px;
color:red;
}
</style>
</head>
<body>
<div class="class">
<div id="div1">測試1</div>
<div id="div2">測試2</div>
</div>
</body>
</html>
顯示效果圖：
，，，效果看到了吧，，，實現兩個div並列顯示，各佔屏幕寬度一半。