【问题】关于一个常见的div布局问题（顶着有分）

小_虎 2010-11-01 01:40:06
布局效果如下，为什么我几个样式老是实现不了呢。



要求：左边和右边固定宽，而中间是自动适应的。

底部div需要居所有div的下面。搞了半天，

主要是中间div的position:relative;问题，把position设置为relative的话，右侧的div就不跟他平行。

设置为absolute的话，右侧div是平行了，但是底部的div就在mian div的后面，而且跑到上面去了。

贴上测试代码
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div id="main">

        <div id="divleft" style="float: left; width: 220px; height: 300px; border: 1px solid red">

        左边div

        </div>

        <div id="divcenter" style="margin-left: 228px; margin-right: 228px; border-width: 1px 3px 3px 1px;

            border-color: #ced7ce; border-style: solid; background: #fff; padding: 10px 10px 10px;

            position: relative; border: 1px solid red; height: 300px;">

            中间div

        </div>

        <div id="divright" style="float: right; height: 500px; width: 220px; border: 1px solid red">

        右边div

        </div>

    </div>

    <div id="bottom" style="padding: 15px 0; line-height: 120%; background: #4aa6bd;

        border-top: 2px solid #bde3ef; text-align: center; font-style: normal; color: #fff; border: 1px solid red;height:100px;">

        底部div

    </div>

    </form>

</body>

</html>


我的效果如下：



主要是想更新下网站：www.52coding.net发现搞不定了。。
...全文
487 67 打赏 收藏 转发到动态 举报
写回复
用AI写文章
67 条回复
切换为时间正序
请发表友善的回复…
发表回复
hanyise520 2010-11-03
  • 打赏
  • 举报
 回复
高手云集！！！ CSS 不懂啊
a405833836 2010-11-03
  • 打赏
  • 举报
 回复
a405833836 2010-11-03
  • 打赏
  • 举报
 回复
[img=][/img]

a405833836 2010-11-03
  • 打赏
  • 举报
 回复 


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div id="main">

        <div id="divleft" style="float: left; width: 220px; height: 300px; border: 1px solid red">

        左边div

        </div>

        <div id="divcenter" style="margin-left: 228px; margin-right: 228px; border-width: 1px 3px 3px 1px;

            border-color: #ced7ce; border-style: solid; background: #fff; padding: 10px 10px 10px;

            position: relative; border: 1px solid red; height: 300px;">

            中间div

        </div>

        <div id="divright" style="margin-top: -300px;float: right; height: 300px; width: 220px; border: 1px solid red">

        右边div

        </div>

    </div>

    <div id="bottom" style="padding: 15px 0; line-height: 120%; background: #4aa6bd;

        border-top: 2px solid #bde3ef; text-align: center; font-style: normal; color: #fff; border: 1px solid red;height:100px;">

        底部div

    </div>

    </form>

</body>

</html>


caotoulei 2010-11-03
  • 打赏
  • 举报
 回复
参考一下my.ccisd.net,我们组为了使这个布局可以在ie，ff上都不错，搞了好久。
HaveOneDream 2010-11-01
  • 打赏
  • 举报
 回复
顶~~~~~~~~~~
haa17 2010-11-01
  • 打赏
  • 举报
 回复
坚决的顶上
phil999 2010-11-01
  • 打赏
  • 举报
 回复 
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

body, div {

	margin:0px;

	padding:0px;

}

#main {

	width:1000px;

	margin:0px auto;

}

#divleft {

	float: left;

	width: 220px;

	height: 300px;

	background-color: #99FF00;

}

#divcenter {

	float:left;

	width:540px;

	background: #fff;

	padding: 10px;

	height: 300px;

	background-color: #66CCFF;

}

#divright {

	float: left;

	height: 500px;

	width: 220px;

	background-color: #CC99CC;

}

#bottom {

	clear:both;

	height:100px;

	background-color: #FF9999;

}

</style>

</head>

<body>

  <div id="main">

    <div id="divleft"> 左边div </div>

    <div id="divcenter"> 中间div </div>

    <div id="divright"> 右边div </div>

    <div id="bottom"> 底部div </div>

  </div>

</body>

</html>


试试这个，测试过，中间那个div自适应做不到，只能计算出宽度。另外边框去掉了，用背景颜色表示每个div
subxli 2010-11-01
  • 打赏
  • 举报
 回复
围观布局 ..
yan19861206 2010-11-01
  • 打赏
  • 举报
 回复
哎 我不是美工 只能帮你顶顶帖子了
fellowcheng 2010-11-01
  • 打赏
  • 举报
 回复
自适应的问题一般都要在加载完成后通过js实现
hookyzlr 2010-11-01
  • 打赏
  • 举报
 回复 


<div id="main">

        <div id="divleft" style="float: left; width: 220px; height: 300px; border: 1px solid red;">

        左边div

        </div>

        <div id="divcenter" style="margin-right: 228px; border-width: 1px 3px 3px 1px;

            border-color: #ced7ce; float:left; border-style: solid; background: #fff; padding: 10px 10px 10px;

            position: relative; border: 1px solid red; height: 280px;">

            中间div

        </div>

        <div id="divright" style="float: right; height: 300px; width: 220px; border: 1px solid red">

        右边div

        </div>

    </div>

    <div id="bottom" style="padding: 15px 0; width:100%; line-height: 120%; background: #4aa6bd;

        border-top: 2px solid #bde3ef; text-align: center; font-style: normal; color: #fff; border: 1px solid red;height:100px;">

        底部div

    </div>

这个样子符合你的要求不？
s370092561 2010-11-01
  • 打赏
  • 举报
 回复
左 右 中

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
<div id="divleft" style="float: left; width: 220px; height: 300px; border: 1px solid red">
左边div
</div>
<div id="divright" style="float: right; height: 500px; width: 220px; border: 1px solid red">
右边div
</div>
<div id="divcenter" style="margin-left: 228px; margin-right: 228px; border-width: 1px 3px 3px 1px;
border-color: #ced7ce; border-style: solid; background: #fff; padding: 10px 10px 10px;
position: relative; border: 1px solid red; height: 400px;">
中间div
</div>
<div style="clear:both"></div>
</div>
<div id="bottom" style="padding: 15px 0; line-height: 120%; background: #4aa6bd;
border-top: 2px solid #bde3ef; text-align: center; font-style: normal; color: #fff; border: 1px solid red;height:100px;">
底部div
</div>
</form>
</body>
</html>

小_虎 2010-11-01
  • 打赏
  • 举报
 回复
[Quote=引用 48 楼 ihandler 的回复:]
再调不出来，我就无语了
[/Quote]

哎。。你早说，是左 右 中 啊，呵呵。。谢谢。
stillmelody 2010-11-01
  • 打赏
  • 举报
 回复
亲爱的,关键是这个
.box{
width:100%;
font-size:12px;
}
s370092561 2010-11-01
  • 打赏
  • 举报
 回复
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<style>
#divleft{ float: left; width: 220px; height: 300px; border: 1px solid red;}
#divcenter{ height:400px; margin:0 228px; border-width: 1px 3px 3px 1px; border-color: #ced7ce; border-style: solid;
background: #fff; padding: 10px 10px 10px; position: relative; border: 1px solid red;}
#divright{ float: right; height: 500px; width: 220px; border: 1px solid red;}
</style>
<body>
<form id="form1" runat="server">
<div id="main" width:100%>
<div id="divleft" >
左边div </div>
<div id="divright" > 右边div </div>
<div id="divcenter" > 中间div</div>
<div style="clear:both"></div>
</div>
<div id="bottom" style="padding: 15px 0; line-height: 120%; background: #4aa6bd;
border-top: 2px solid #bde3ef; text-align: center; font-style: normal; color: #fff; border: 1px solid red;height:100px;">
底部div
</div>
</form>
</body>
</html>
stillmelody 2010-11-01
  • 打赏
  • 举报
 回复
[Quote=引用 50 楼 damjmk2 的回复:]
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<……
[/Quote]
只好顶了
kkbac 2010-11-01
  • 打赏
  • 举报
 回复
[Quote=引用 41 楼 jxyxhz 的回复:]

希望有人在我贴出的测试代码上修改，让我知道该改什么东西。。
[/Quote]

div顺序是 左 右 中 , 不是左中右.
缪军 2010-11-01
  • 打赏
  • 举报
 回复
小虎,margin留少了
damjmk2 2010-11-01
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<title>无标题文档</title>  

<style type="text/css">  

<!--   

* {   

margin:0;   

padding:0;   

}   

.box{   

width:100%;   

font-size:12px;  

float:left; }   

.leftdiv{   

float:left;   

width:200px;   

height:600px;   

background:#f00;   

}   

.middlediv{   

background:#0f0;   

height:600px;   

margin:0 200px;   

}   

.rightdiv{   

float:right;   

width:200px;   

height:600px;   

background:#00f;   

}   

-->  

</style>  

</head>  

  

<body>  

<div class="box">  

   <div class="leftdiv">此处显示  class "leftdiv" 的内容</div>  

  <div class="rightdiv">此处显示  class "rightdiv" 的内容</div>    

  <div class="middlediv">此处显示  class "box" 的内容</div>      

</div>  

<div id="bottom" style="padding: 15px 0; line-height: 120%; background: #4aa6bd;

        border-top: 2px solid #bde3ef; text-align: center; font-style: normal; color: 



#fff; border: 1px solid red;height:100px;">

        底部div

    </div>

</body>  

</html>


这样呢
加载更多回复（47）
HTML CSS + DIV实现整体布局
开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2、什么是W3C标准？  W3C：World Wide Web Consortium，万维网联盟  W3C的职能：负责制定和维护Web行业标准  W3C标准包括一系列的标准： HTML内容...
关于DIV布局中图片留白的个人见解
可能接触HTML多了的人都会遇到类似问题，当一个div（或者ul或者li）包含一张图片的时候，这张图片底部会有一部分的留白。很多人就感到很困惑。毕竟我们并没有设它的margin值或padding值呀！为什么它就会有这么一个...
DIV+CSS之页面布局、布局常用属性（浮动、清除、定位、溢出、层叠）、布局类型
浮动（float）1.1 传统网页布局的三种方式1.2 标准流（普通流、文档流）1.3 浮动1.4 浮动特性1.5 浮动元素经常和标准流父级搭配使用1.6 清除浮动1.7 额外标签法2.div+CSS进行页面布局2.1 常见的页面布局2.2 如何...
css实现网页布局，三个div并排显示
css实现网页布局，三个div并排显示 主要使用到float：left；和display：inline-block来处理 以及在article和footer部分的边距问题上，使用对父级元素设置**font-size：0；**来处理 <!DOCTYPE html> <...
用css+div实现网页的简单布局（一）
这周进行了为期大约两天的h5前端开发的实训，因为有事请了一天的假，所以还是要继续学习巩固一下基础方面的知识。...Div+css 是一种目前比较流行的网页布局技术 Div 来存放需要显示的数据(文字，图表…) , css 就是...
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章