如何“稳定”一个div

我在页面右侧的一个div和顶部的标题，例如：如何“稳定”一个div

enter image description here

所以我有菜单的div和我把它包在另一个div中，将它设置为向右浮动，另外，在菜单div之前，我将头部div放在顶部。我想要做的是做另外2个部分其中一个应该是一个iFrame（不要拍我请），

无论何时我尝试添加其他divs，无论是菜单上得到他们之上或者他们只是放在菜单的结尾。我希望它是这样的： 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/

ps：我不知道它是否与此有关，但当我打开它在mp电话它显示相当混乱。有没有办法解决这个问题呢？谢谢。

来源

2015-06-14 wannabe programmer

A.在哪里失败的一部分？（你的代码片段和小提琴只有工作部分）。 B.你能在小提琴中创建一个MINIMAL例子吗（这太多没有意义的代码会分散注意力）？ C.如果你使用CSS，你为什么内联样式（再次，毫无意义和分心）？ – Amit

根据您的指导进行编辑。 –

对于搞砸了移动显示它是B/C你没有编码您的网站是responsive。简单地说，使用像bootstrap或HTML5 Boilerplate这样的CSS框架将为您解决这个问题。

来源

2015-06-14 19:43:38 coderrick

谢谢。首先，我需要保留java部分以保持菜单样式。其次，我做了你所说的并且没有奏效。 –

你确定吗？当使用引导（我推荐使用它，因为它可以说是最流行的），你必须使用它为你预定义的类，所以你将不得不将这些CSS类加入到你现有的元素中。顺便说一句，“java部分”是什么意思？ – coderrick

我的意思是javaScript，现在我不使用bootstrap。 –

以下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代码:)

来源

2015-06-14 19:52:39

如何“稳定”一个div

回答

相关问题