當窗口大小發生變化時Div重疊

當我改變窗口的大小時，試圖讓我的div不移動。當窗口大小發生變化時Div重疊

這裏是有問題的CSS

#Main { 
    font-family: Arial; 
} 

#Intro{ 
    width: 70%; 
    height: 1000px; 
    background: rgba(255, 250, 250, 0.5); 
    border-radius: 10px 10px 10px 10px; 
    -moz-border-radius: 10px 10px 10px 10px; 
    -webkit-border-radius: 10px 10px 10px 10px; 
    border: 0px solid #000000; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    padding-top: 20px; 
position: relative; 
} 

nav { 
    width: 15% 
    position: fixed; 
    float: left; 
    background: rgba(255, 250, 250, 0.5); 
    border-radius: 10px 10px 10px 10px; 
    -moz-border-radius: 10px 10px 10px 10px; 
    -webkit-border-radius: 10px 10px 10px 10px; 
    border: 0px solid #000000; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
} 

twitter { 
    width: 15%; 
    float: right; 
    background: rgba(255, 250, 250, 0.5); 
    border-radius: 10px 10px 10px 10px; 
-moz-border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
    border: 0px solid #000000; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
}

基本上，我有我的主要事業部內部的三個Div時，被重疊當屏幕尺寸的變化或分辨率較小。我確信這是愚蠢的，我做錯了，但我們在這裏。

來源

2015-06-01 enKode

提示：'border-radius：10px;'是速記'border-radius：10px 10px 10px 10px;' – zachjs

謝謝，只是想覆蓋我所有的基礎。永遠不能太確定：P – enKode

如果我理解正確的話你想要有一個列布局？

<center> 
    <div id="Main"> 
    <nav id="nav">Navigation goes here</nav> 
    <div id="twitter">Twitter goes here</div> 
    </div> 
</center> 

#main { 
    width: 100%; 
} 

#nav, 
#twitter { 
    float: left; 
    color: #fff; 
} 

#nav { 
    width: 30%; 
    background: blue; 
} 

#twitter { 
    width: 70%; 
    background: green; 
}

本示例創建一個雙列布局，左側爲導航欄，右側爲「Twitter」。如果您想要添加另一列，則必須將其作爲子項添加到#main並更改列的寬度。（#nav，#twitter和你的第三個）

如果你想改變較小屏幕的大小或順序，你必須使用media queries。你可以做的是以下幾點：

@media screen and (max-width: 600px) { 
    #nav, 
    #twitter { 
     float: none; 
     width: 100%; 
    } 
}

我在HTML中看到的另一件事是你試圖用作元素。這將是一個自定義HTML元素，它不會在每個瀏覽器中工作，尤其是沒有舊的（沒有像Polymer這樣的polyfill /庫）。您可以在html5rocks：Custom elements上閱讀關於自定義HTML元素的更多信息。爲了保持簡單，您應該堅持使用HTML5 elements。

來源

2015-06-02 01:34:50

'＃主要{ \t寬度：100％; \t最小寬度：50％; } #nav { position：fixed; float：left; 寬度：15％; } #Intro { width：70％; height：1000px; float：left; } #twitter { width：15％; }' 那麼三列看起來會是這樣嗎？ – enKode

是的，這應該工作，你試過嗎？ –

是的，它只是這樣做... http：//imgur.com/bLTC5h6 – enKode

如果我正確理解你的問題，那麼當你改變你的窗口屏幕時，你不希望你的div調整大小。我建議你改變：
width: x%;
到：
width: xpx;
或者，如果你想要這個解決後呈現頁面，那麼你可能要使用的最小寬度屬性，也許能解決您的問題。
min-width: xpx;
或
min-width: x%;

來源

2015-06-01 23:39:31

我希望避免像素長度，因爲我不想在較小的屏幕上伸展頁面。我會盡力最小寬度 – enKode

不，沒什麼... – enKode

你能告訴你正在使用的HTML？這可能是因爲你錯過了meta viewport tag。另一種解決方案可能是使用的像素值，而不是百分比（如胡安·卡洛斯·建議）如果你不想寬度改變：

#Main { 
    width: 800px; 
}

作爲一個方面說明我會建議你看一看caniuse .com爲前綴。你並不需要所有這些前綴爲box-shadow和border-radius

來源

2015-06-01 23:54:53

如果你要在你的網頁瀏覽器向下還原這個頁面，一切都將保持它在哪裏，只是在滾動條更小的屏幕這就是我希望我的代碼能夠做到，但所有事情都是......動作。我將抓住我的HTML並將其發佈到 – enKode

下面的代碼的其餘部分

指數：

<?php 
echo "<center>"; 
echo "<div id='Main'>"; 
      include("banner.php"); 
    include("navbar.php"); 
    include("twitter.php"); 
    include("intro.php"); 
    include("footer.php"); 
echo "</div>"; 
echo"</center>"; 

?>

導航欄

<?php 
echo "<nav> 
<table> 
<tr> 
<td> 
     <ul>  
      <li><a href= 'index.php' class='LinkHome'/></a></li>  
      <li><a href= 'products.php' class='LinkProduct'/></a></li> 
      <li><a href= 'fitch.php' class='LinkFitch'/></a></li> 
      <li><a href= 'argodealers.php' class='LinkArgo'/></a></li> 
      <li><a href= 'about.php' class='LinkAbout'/></a></li> 
      <li><a href= 'contact.php' class='LinkContact'/></a></li> 
     </ul> 
</td> 
</tr> 


</table> 

</nav>"; 
?>

Twitter的

<?php 
echo " 
    <twitter>    
    Twitter Stuff would go here 
    </twitter>"; 
?>

凌亂，我知道

而且，我採取了他們兩個出來的div，看看會發生什麼事[編輯CSS適當] - 這種方法有較好的改善作用

來源

2015-06-02 00:40:33 enKode

當窗口大小發生變化時Div重疊

回答

相關問題