要求： 根据屏幕宽度，实现两个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-p_w_picpath: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-p_w_picpath: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并列显示，各占屏幕宽度一半。