如何「穩定」一個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

回答

相關問題