div+css如何做页面的一行两列布局
我现在做了个页面,有三个版块,打算把其中两个版块竖直排列放在页面的左边,第三个版块紧挨着这两个版块放在右边,也就是实现一行两列的那种样式,可是我怎么做都排不成,下面是我写...
我现在做了个页面,有三个版块,打算把其中两个版块竖直排列放在页面的左边,第三个版块紧挨着这两个版块放在右边,也就是实现一行两列的那种样式,可是我怎么做都排不成,下面是我写的代码:
.center_tdbgall
{
background:#ffffff;
width:900px;
}
.middle400 {float:left; width:400px; padding:5px}
.middle250 {float:left; width:250px; padding-bottom:5px}
.middle250r {float:right; width:215; padding:5px}
#mid_1 {float:left;
height:130px;
border-style:solid;
border-width:1px;
border-color:#B7C429;
}
.650 { float:left; border-color:#CFC605; border-style:solid 1px; padding-bottom:5px; width:650px}
.650_1 {float:left; border-color:#EE8613; border-style:solid 1px; padding:5px; width:210px}
这是CSS的定义,
页面的代码是:
<div id="middle" align="center">
<div class="center_tdbgall">
<div class="main_title_575">
<div align="left"><A class=class href="#"><B>典型病例</B></A>
</div>
</div>
<div id="mid_1">
<!--{$GetPicPhoto(1007,0,True,0,6,false,false,0,3,2,130,90,20,0,True,6,0)}--></div>
<div class="middle250">
<div class="main_title_575">
<div align="left"><a class="class" href="#"><b>专家忠告</b></a></div>
</div>
<div class=main_tdbg_575>
<!--{$GetArticleList(1,33,True,0,True,5,False,False,"",0,3,1,20,0,false,0,false,False,0,False,False,False,false,True,False,1)}-->
</div>
<div class="main_title_575">
<div align="left"><a class="class" href="#"><b>骨髓炎治愈的四个阶段</b></a></div>
</div>
</div>
</div>
</div>
<div class="center_tdbgall">
<div class="650">
<div class="650_1">
<div class="main_title_575">
<div align="left"><A class=class href="#"><B>老年骨髓炎</B></A>
</div>
</div>
<div id="mid_1">
<!--{$GetPicPhoto(1007,0,True,0,6,false,false,0,3,2,130,90,20,0,True,6,0)}--></div>
</div>
</div>
</div>
肯请帮手帮我指点下,本人很急用!
按你说的方法做了,行不通.成为整个包含在center_tdbgall里的东西全居左了.应该不是改这,帮我再检查下改哪吧?我是检查不出来了,很着急.谢谢了!! 展开
.center_tdbgall
{
background:#ffffff;
width:900px;
}
.middle400 {float:left; width:400px; padding:5px}
.middle250 {float:left; width:250px; padding-bottom:5px}
.middle250r {float:right; width:215; padding:5px}
#mid_1 {float:left;
height:130px;
border-style:solid;
border-width:1px;
border-color:#B7C429;
}
.650 { float:left; border-color:#CFC605; border-style:solid 1px; padding-bottom:5px; width:650px}
.650_1 {float:left; border-color:#EE8613; border-style:solid 1px; padding:5px; width:210px}
这是CSS的定义,
页面的代码是:
<div id="middle" align="center">
<div class="center_tdbgall">
<div class="main_title_575">
<div align="left"><A class=class href="#"><B>典型病例</B></A>
</div>
</div>
<div id="mid_1">
<!--{$GetPicPhoto(1007,0,True,0,6,false,false,0,3,2,130,90,20,0,True,6,0)}--></div>
<div class="middle250">
<div class="main_title_575">
<div align="left"><a class="class" href="#"><b>专家忠告</b></a></div>
</div>
<div class=main_tdbg_575>
<!--{$GetArticleList(1,33,True,0,True,5,False,False,"",0,3,1,20,0,false,0,false,False,0,False,False,False,false,True,False,1)}-->
</div>
<div class="main_title_575">
<div align="left"><a class="class" href="#"><b>骨髓炎治愈的四个阶段</b></a></div>
</div>
</div>
</div>
</div>
<div class="center_tdbgall">
<div class="650">
<div class="650_1">
<div class="main_title_575">
<div align="left"><A class=class href="#"><B>老年骨髓炎</B></A>
</div>
</div>
<div id="mid_1">
<!--{$GetPicPhoto(1007,0,True,0,6,false,false,0,3,2,130,90,20,0,True,6,0)}--></div>
</div>
</div>
</div>
肯请帮手帮我指点下,本人很急用!
按你说的方法做了,行不通.成为整个包含在center_tdbgall里的东西全居左了.应该不是改这,帮我再检查下改哪吧?我是检查不出来了,很着急.谢谢了!! 展开
3个回答
展开全部
div+css做页面的一行两列布局，首先我们是需要三个div的，第一个div包裹着其他的2个div，然后给那2个div设置float属性和width，height，最好是给个border利于布局的时候方便观察，这里举个例子：
<html>
<head>
<style>
#div1{
width:960px; //通过id来控制
height:600px;
}
.left{
width:400px
height:400px;
border:1px solid #f00;
float:left;
marign-right:40px; //距离第三个div有点距离
}
.right{
width:400px;
border:1px solid #f00;
height:400px;
float:left;
}
</style>
</head>
<body>
<div id='div1'>
<div class='left'>我是左边的</div>
<div class='right'>我是右边的</div>
</div>
</body>
</html>
<html>
<head>
<style>
#div1{
width:960px; //通过id来控制
height:600px;
}
.left{
width:400px
height:400px;
border:1px solid #f00;
float:left;
marign-right:40px; //距离第三个div有点距离
}
.right{
width:400px;
border:1px solid #f00;
height:400px;
float:left;
}
</style>
</head>
<body>
<div id='div1'>
<div class='left'>我是左边的</div>
<div class='right'>我是右边的</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.center_tdbgall
{
background:#ffffff;
width:300px;
float: left;
}
这样就行了
{
background:#ffffff;
width:300px;
float: left;
}
这样就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
感觉很乱……
实现你说的效果……
如果是居中版式，首先要有个总宽度，比如width＝800px;
放左边的用position:relative;float:left;要定义宽度……(1)
放右边的还是用position:relative;float:left;还是要定义宽度……(2)
注意（1）＋（2）的宽度要小于总宽度，那他就会显示在同一排……
记住定宽和设float:left;是主要的……
其余的是否要
div br{display:none;}就看你自己的版式……
实现你说的效果……
如果是居中版式，首先要有个总宽度，比如width＝800px;
放左边的用position:relative;float:left;要定义宽度……(1)
放右边的还是用position:relative;float:left;还是要定义宽度……(2)
注意（1）＋（2）的宽度要小于总宽度，那他就会显示在同一排……
记住定宽和设float:left;是主要的……
其余的是否要
div br{display:none;}就看你自己的版式……
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
