<分区>
<分区>
我在使用 JS 脚本时遇到了一些问题，并且已将这些问题隔离开来。 我的 div 完全搞砸了。 我正在寻找的布局是:
wrapper - whole page.
header
left menu 1 right content (stretches to / past left menu item 3)
left menu 2
left menu 3
footer
I would like the menu items to be contained in a div which is the same height as the right content div.
This is the code I have :
<html>
<head>
<title>Bliss</title>
<link rel="stylesheet" type="text/css" href="styling1.css" />
</head>
<body>
<div id="wholewrap">
<div id="header">header</div>
<div id="middlewrap">
<div id="menuwrap">
<div id="1" class="floatleftnw">1</div>
<div id="1" class="floatleftnw">2</div>
<div id="1" class="floatleftnw">3</div>
</div><!-- end of menu-->
<div id="right" style="float:right; display:inline;">right</div>
</div><!-- end of middlewrap-->
<div id="footer">
footer
</div >
</div><!-- end of whole wrap-->
</body></html>
我的 css(根据 styling1.css)是:
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: center;
line-height: 1.8em;
background:#fff;
}
#wholewrap {
width:1000px;
margin-left:auto;
margin-right:auto;
}
#right {
margin-left:220px;
width:740px;
margin-bottom:40px;
float:right;
display:inline;
}
.floatleftnw {
float:left;
}
#middlewrap {
height:800px;
width:1000px;
}
#menuwrap {
height:800px;
width:200px;
display:inline;
border:1px solid blue;
}
.clearer {
font-size: 0px;
height: 0px;
width: 100%;
display: block;
clear: both;
}
谁能看出我哪里出错了？当我重写这个布局时(最后一小时或 2 小时)，我打开了我的 div 并确保我立即关闭它甚至评论它。代码在 DreamWeaver 中没有显示任何错误，但是当我在 Firebug 中查看时，div 没有按预期运行，即 menuwrap 周围应该有一个蓝色边框。右侧应该与左侧菜单内联(我可以在 menuwrap 周围设置边框，但是一旦我将内联添加到右侧的属性中，它就会全部被破坏。)
谢谢
最佳答案
在你的 css 和 html 中改变一点
#menuwrap {
background-color: #D3C5C5;
float: left;
height: 100%;
width: 30%;
}
#right {
height: 100%;
width: 70%;
float:left;
display:block;
background-color: #fDc3C5;
}
.floatleftnw {
float:left;
clear:both;
}
<div id="wholewrap">
<div id="header">header</div>
<div id="middlewrap">
<div id="menuwrap">
<div id="1" class="floatleftnw">1</div>
<div id="1" class="floatleftnw">2</div>
<div id="1" class="floatleftnw">3</div>
</div><!-- end of menu-->
<div id="right">right</div>
</div><!-- end of middlewrap-->
<div id="footer">
footer
</div >
</div><!-- end of whole wrap-->
关于html - 无法正确排序 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9496120/