我正在制作一个网页,需要一个标题(在顶部)和一个左对齐的菜单(在标题下方)以及该菜单右侧的内容。
我面临的问题是我想使用(元素和 float )而不是创建页面的结构,但是,每当我调整浏览器窗口大小时,内容元素就会在菜单下 float 。我希望内容固定在左侧 float 菜单的右侧。
有人知道我该如何解决这个问题吗?
我的 html 代码有这样的结构:
<div id="menu">
<a href="#">menu #1</a>
...
...
...
</div>
<div id="subcontent">
text or whatnot...
</div>
CSS 文件如下所示:
#menu
{
width: 200px;
float: left;
}
#subcontent
{
width: 800px;
float: left;
}
PS 我曾尝试将像素更改为 % 但没有成功。
最佳答案
CSS
#layout {
min-width: 1001px;
}
#menu {
width: 200px;
float: left;
}
#subcontent {
width: 800px;
float: left;
}
.clear-both {
clear: both;
font: 1px/1px monospace;
display: block;
}
HTML
<div id="layout">
<div id="menu"> <a href="#">menu #1</a> ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
<div class="clear-both"></div>
</div>
另一种解决方案:
CSS
#layout {
display: table;
width: 1000px; /* set it to 100% if #subcontent width is dynamic */
}
#menu {
width: 200px;
display: table-cell;
}
#subcontent {
width: 800px; /* you can remove the width to make it dynamic */
display: table-cell;
}
HTML
<div id="layout">
<div id="menu"> <a href="#">menu #1</a> ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
</div>
关于html - 我可以用 <div> 而不是 <table> 构建一个网页,并且仍然在几个区域中拆分页面吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12192384/