Question

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

enter image description here

所以我有菜单的div并将其包装在另一个div中，将其设置为向右浮动，另外，在菜单div之前我有顶部div。我要做的是再制作另外两个部分，其中一部分应该是iFrame（请不要拍我），

每当我尝试添加其他div时，菜单就会越过它们，或者它们只是放在菜单的末尾。我希望它是那样的： enter image description here

这是代码的一部分：

<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

对于混乱的移动展示广告，您尚未将您的网站编码为responsive。简单地说，使用像bootstrap或HTML5 Boilerplate这样的CSS框架会为您解决这个问题。

Answer 2

遵循CSS规则浮动元素应该首先出现在DOM树中：

<div class="header"></div>
<div class="content">
    <div class="menu"></div>
    <div class="iframe"></div>
    <div class="anything-else"></div>
</div>

如果您想让菜单向左或向右移动，则无关紧要。对于您的布局，这将类似于this fiddle：

HTML：

<div class="header">Header</div>
<div class="content">
    <div class="menu">Menu</div>
    <div class="iframe">Iframe</div>
    <div class="anything-else">All the rest content</div>
</div>

CSS：

.header {
    height: 200px;
    background: #000;
    color: #fff;
}

.content {
    overflow: auto;
}

.menu {
    float: right;
    background: lime;
    width: 33vw;
    height: 300px;
}

.iframe {
    float: right;
    background: red;
    width: 33vw;
    height: 300px;
}

.anything-else {
    float: none; /* we dont want to float last div */
    background: lightblue;
    width: auto;
    height: 300px;
}

不需要JavaScript代码：）

如何“稳定”一个div

2 个答案: