0

我正在制作一个需要标题（顶部）和左对齐菜单（标题下方）以及该菜单右侧的内容的网页。

我面临的问题是我想使用（使用元素和浮动）而不是创建页面的结构但是，每当我调整浏览器窗口的大小时，内容元素都会在菜单下浮动。我希望内容贴在左侧浮动菜单的右侧。

有人知道我该如何解决这个问题吗？

我的 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 我尝试将像素更改为 % 但没有运气。

尝试发送另一个 X-Frame-Options 标头，添加

<?php header('X-Frame-Options: GOFORIT'); ?>

到您的页面顶部。它应该禁用 SAMEORIGIN 命令。

4

2 回答 2

2

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>
于 2012-08-30T08:12:20.253 回答
1

您将需要一个外部容器。

只需尝试将两个元素包装在宽度为 1000px 的 div 中

<div class="outer">
    <div id="menu">
        <a href="#">menu #1</a>   
    </div>
    <div id="subcontent">    
    </div>
</div>


.outer{width: 1000px;}
#menu
{
    width: 200px;
    float: left;
}

#subcontent
{ 
    vertical-align: top;
    width: 800px;
    float: left;   
}
于 2012-08-30T08:07:49.213 回答