在请教个div布局问题

pgdoryoku 2009-04-10 07:53:32

对这东西还真不熟悉哪，又碰到新问题了。请各位大狭帮忙看看。

<html>

<head>

<style>

.headDivLeft {

	OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:109px;float:left;

	background-color: green;

}

.logo{

	margin:0px; width:322px; height:109px; float:left

}

.rtup{

	width:406px; height:74px; float:right

}

.rtdown{

	width:406px; height:35px; float:right

}

.headDivRight {

	OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:109px;CLEAR: right;

	background-color: yellow;



}

.Menuleft{

	OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px; height:54px;float:left;

	background-color:#0000FF;

}

.Menuright{

	OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:175px;CLEAR: right;

	background-color:#FF00FF

}

.Menubottom{

	OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:8px;float:left;

	background-color:#993

}

.bannermain{

	OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:100px;float:left;

	background-color:#63C

}

.bannerbottom{

	OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;MARGIN-BOTTOM: 10px;height:12px;float:left;

	background-color:#0F6

}

</style>

</head>



<body>

<DIV class="headDivLeft">

<DIV class="logo">logo</DIV>

<DIV class="rtup">rtup</DIV>

<DIV class="rtdown">rtdown</DIV>

</DIV>



<DIV class="headDivRight">headDivRight</DIV>

<DIV style="clear:both"></DIV>



<DIV class="Menuleft">Menuleft</DIV>

<DIV class="Menubottom">Menubottom</DIV>

<DIV class="bannermain">bannermain</DIV>

<DIV class="bannerbottom">bannerbottom</DIV>

<DIV class="Menuright">如何让这个div与前面的Menuleft，Menubottom，bannermain，bannerbottom一起列在同一行呢？谢谢了。</DIV>

<DIV style="clear:both"></DIV>

</body>

</html>

...全文

86 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

pgdoryoku 2009-04-10

打赏
举报

哈哈的确我疏忽了，非常感谢热心的bing475879749 兄弟

bing475879749 2009-04-10

打赏
举报



<html>

<head>

<style>

.container{width:1011px;overflow:hidden;margin:0 auto;}

.left{width:776px;float:left;}

.right{float:left;225px;margin-left:10px;display:inline;}

.headDivLeft {

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:109px;float:left;

    background-color: green;

}

.logo{

    margin:0px; width:322px; height:109px; float:left

}

.rtup{

    width:406px; height:74px; float:right

}

.rtdown{

    width:406px; height:35px; float:right

}

.headDivRight {

    OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:109px;CLEAR: right;

    background-color: yellow;



}

.Menuleft{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px; height:54px;float:left;

    background-color:#0000FF;

}

.Menuright{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:175px;CLEAR: right;

    background-color:#FF00FF

}

.Menubottom{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:8px;float:left;

    background-color:#993

}

.bannermain{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:100px;float:left;

    background-color:#63C

}

.bannerbottom{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;MARGIN-BOTTOM: 10px;height:12px;float:left;

    background-color:#0F6

}

</style>

</head>



<body>

<Div class="container">

<div class="left">

<DIV class="headDivLeft">

<DIV class="logo">logo</DIV>

<DIV class="rtup">rtup</DIV>

<DIV class="rtdown">rtdown</DIV>

</DIV>

<DIV style="clear:both"></DIV>



<DIV class="Menuleft">Menuleft</DIV>

<DIV class="Menubottom">Menubottom</DIV>

<DIV class="bannermain">bannermain</DIV>

<DIV class="bannerbottom">bannerbottom</DIV>



<DIV style="clear:both"></DIV>

</div>

<div class="right">

<DIV class="headDivRight">headDivRight</DIV>

<DIV class="Menuright">如何让这个div与前面的Menuleft，Menubottom，bannermain，bannerbottom一起列在同一行呢？谢谢了。</DIV></div>

</div>

</body>

</html>

我说LZ，你显示器不是宽屏的，把DIV搞那么宽干什么，不知道弄小点啊

bing475879749 2009-04-10

打赏
举报



<html>

<head>

<style>

.container{width:1011px;overflow:hidden;margin:0 auto;}

.left{width:776px;float:left;}

.right{float:left;225px;margin-left:10px;display:inline;}

.headDivLeft {

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:109px;float:left;

    background-color: green;

}

.logo{

    margin:0px; width:322px; height:109px; float:left

}

.rtup{

    width:406px; height:74px; float:right

}

.rtdown{

    width:406px; height:35px; float:right

}

.headDivRight {

    OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:109px;CLEAR: right;

    background-color: yellow;



}

.Menuleft{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px; height:54px;float:left;

    background-color:#0000FF;

}

.Menuright{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:175px;CLEAR: right;

    background-color:#FF00FF

}

.Menubottom{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:8px;float:left;

    background-color:#993

}

.bannermain{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:100px;float:left;

    background-color:#63C

}

.bannerbottom{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;MARGIN-BOTTOM: 10px;height:12px;float:left;

    background-color:#0F6

}

</style>

</head>



<body>

<Div class="container">

<div class="left">

<DIV class="headDivLeft">

<DIV class="logo">logo</DIV>

<DIV class="rtup">rtup</DIV>

<DIV class="rtdown">rtdown</DIV>

</DIV>

<DIV style="clear:both"></DIV>



<DIV class="Menuleft">Menuleft</DIV>

<DIV class="Menubottom">Menubottom</DIV>

<DIV class="bannermain">bannermain</DIV>

<DIV class="bannerbottom">bannerbottom</DIV>



<DIV style="clear:both"></DIV>

</div>

<div class="right">

<DIV class="headDivRight">headDivRight</DIV>

<DIV class="Menuright">如何让这个div与前面的Menuleft，Menubottom，bannermain，bannerbottom一起列在同一行呢？谢谢了。</DIV></div>

</div>

</body>

</html>

我说LZ，你显示器不是宽屏的，把DIV搞那么宽干什么，不知道弄小点啊

pgdoryoku 2009-04-10

打赏
举报

呵呵，宽度改一下就解决了。

bing475879749 兄弟，你刚才添加了哪些代码呢？

pgdoryoku 2009-04-10

打赏
举报

[Quote=引用 5 楼 bing475879749 的回复:]

怎么不行？

你的什么浏览器？

用最大化窗口浏览
[/Quote]
都换了浏览器了，还是不行，右边的两个div都跳到单独一行去了。

pgdoryoku 2009-04-10

打赏
举报

[Quote=引用 3 楼 bing475879749 的回复:]

不好意思，鼠标多点了一下

LZ的思维太乱了

如果左边有多个DIV，右边也有多个DIV，就要把左边弄个大DIV包含所有左边的DIV，右边同理

左，中，右也是一样
[/Quote]
多谢指点，能麻烦给个完整代码吗？我对div不太熟．．谢谢

bing475879749 2009-04-10

打赏
举报

怎么不行？

你的什么浏览器？

用最大化窗口浏览

pgdoryoku 2009-04-10

打赏
举报

bing475879749 兄弟，您的代码好象不行呀。

bing475879749 2009-04-10

打赏
举报

不好意思，鼠标多点了一下

LZ的思维太乱了

如果左边有多个DIV，右边也有多个DIV，就要把左边弄个大DIV包含所有左边的DIV，右边同理

左，中，右也是一样

bing475879749 2009-04-10

打赏
举报



<html>

<head>

<style>

.left{width:776px;float:left;}

.right{float:left;225px;margin-left:10px;display:inline;}

.headDivLeft {

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:109px;float:left;

    background-color: green;

}

.logo{

    margin:0px; width:322px; height:109px; float:left

}

.rtup{

    width:406px; height:74px; float:right

}

.rtdown{

    width:406px; height:35px; float:right

}

.headDivRight {

    OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:109px;CLEAR: right;

    background-color: yellow;



}

.Menuleft{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px; height:54px;float:left;

    background-color:#0000FF;

}

.Menuright{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:175px;CLEAR: right;

    background-color:#FF00FF

}

.Menubottom{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:8px;float:left;

    background-color:#993

}

.bannermain{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:100px;float:left;

    background-color:#63C

}

.bannerbottom{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;MARGIN-BOTTOM: 10px;height:12px;float:left;

    background-color:#0F6

}

</style>

</head>



<body>

<div class="left">

<DIV class="headDivLeft">

<DIV class="logo">logo</DIV>

<DIV class="rtup">rtup</DIV>

<DIV class="rtdown">rtdown</DIV>

</DIV>

<DIV style="clear:both"></DIV>



<DIV class="Menuleft">Menuleft</DIV>

<DIV class="Menubottom">Menubottom</DIV>

<DIV class="bannermain">bannermain</DIV>

<DIV class="bannerbottom">bannerbottom</DIV>



<DIV style="clear:both"></DIV>

</div>

<div class="right">

<DIV class="headDivRight">headDivRight</DIV>

<DIV class="Menuright">如何让这个div与前面的Menuleft，Menubottom，bannermain，bannerbottom一起列在同一行呢？谢谢了。</DIV></div>

</body>

</html>

bing475879749 2009-04-10

打赏
举报



<html>

<head>

<style>

.left{width:776px;float:left;}

.right{float:left;225px;margin-left:10px;display:inline;}

.headDivLeft {

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:109px;float:left;

    background-color: green;

}

.logo{

    margin:0px; width:322px; height:109px; float:left

}

.rtup{

    width:406px; height:74px; float:right

}

.rtdown{

    width:406px; height:35px; float:right

}

.headDivRight {

    OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:109px;CLEAR: right;

    background-color: yellow;



}

.Menuleft{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px; height:54px;float:left;

    background-color:#0000FF;

}

.Menuright{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:225px; height:175px;CLEAR: right;

    background-color:#FF00FF

}

.Menubottom{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:8px;float:left;

    background-color:#993

}

.bannermain{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;height:100px;float:left;

    background-color:#63C

}

.bannerbottom{

    OVERFLOW: hidden; TEXT-ALIGN: left; width:776px; MARGIN: 0px;MARGIN-BOTTOM: 10px;height:12px;float:left;

    background-color:#0F6

}

</style>

</head>



<body>

<div class="left">

<DIV class="headDivLeft">

<DIV class="logo">logo</DIV>

<DIV class="rtup">rtup</DIV>

<DIV class="rtdown">rtdown</DIV>

</DIV>

<DIV style="clear:both"></DIV>



<DIV class="Menuleft">Menuleft</DIV>

<DIV class="Menubottom">Menubottom</DIV>

<DIV class="bannermain">bannermain</DIV>

<DIV class="bannerbottom">bannerbottom</DIV>



<DIV style="clear:both"></DIV>

</div>

<div class="right">

<DIV class="headDivRight">headDivRight</DIV>

<DIV class="Menuright">如何让这个div与前面的Menuleft，Menubottom，bannermain，bannerbottom一起列在同一行呢？谢谢了。</DIV></div>

</body>

</html>