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