javascript - 如何 "stabilize"一个div

Question

我在页面右侧有一个 div，在顶部有一个标题，例如:

所以我有菜单的 div，我将它包裹在另一个 div 中，将其设置为向右浮动，此外，在菜单 div 之前，我在顶部有标题 div。我想要做的是制作另外 2 个部分，其中一个应该是 iFrame(请不要拍我)，

每当我尝试添加其他 div 时，菜单要么在它们上面，要么它们只是放在菜单末尾的下面。我希望它是这样的:

这是部分代码:

<div id="header">
    <h1>Pre-Test</h1>
</div>


<div id="wrap" style="right: 0;height: 100%; width: 100%; position: absolute; overflow-y: scroll;">
        <div id='cssmenu'>
        <ul>
       <li class='active'><a href='#'><span>Home</span></a></li>
       <li class='has-sub'><a href='#'><span>Products</span></a>
          <ul>
             <li><a href='#'><span>Product 1</span></a></li>
             <li><a href='#'><span>Product 2</span></a></li>
             <li><a href='#'><span>Product 3</span></a></li>
          </ul>
       </li>
     ...
    </div>
</div>
<div class="two_main_frames">
    <div class="main_right_frame">
        <iframe src="http://www.amazon.com">
        </iframe>
    </div>
</div>

和CSS:

.two_main_frames {
    direction: rtl;
    width: 80%;
    /*height: 100%;*/

}

.main_right_frame {
    width: 50%;
    height: 100%;
    overflow-y: scroll;
    font-size: 14px;
    float: right;
    direction: rtl;
    clear: both;
}

您可以在此处查看代码: http://jsfiddle.net/xQgSm/124/

p.s: 我不知道这是否与此有关，但是当我在 mp 手机中打开它时，它显示得很乱。有什么办法可以解决这个问题吗？谢谢。

Answer 1

对于乱七八糟的移动显示，这是 b/c 你还没有将你的网站编码为 responsive .简单地说，使用像 bootstrap 这样的 CSS 框架或 HTML5 Boilerplate会为您处理的。