調整瀏覽器大小時的圖層位置

當我調整瀏覽器窗口的大小時，藍色按鈕位於左側徽標下方，與文本「Welkom Bart」位於同一行，儘管它們是兩個不同的圖層。我希望文本「Welkom Bart」也降低，所以它們不在同一行。我需要添加到我的CSS？調整瀏覽器大小時的圖層位置

normal sized

HTML例如

<div id="mainmenu"> 
    <div id="logo"><img ... /></div> 
    <div id="usermenu">Buttons</div> 
</div> 

<div id="maintitle"> 
    <h2>Welkom Bart</h2> 
    <hr /> 
</div>

CSS

#mainmenu { 
    height: 100px; 
    position: relative; 
} 
#logo { 
    float: left; 
    width: 200px; 
    margin-right: 20px; 
} 
#usermenu { 
    float: right; 
} 
#maintitle { 
    margin-bottom: 20px; 
} 
#maintitle hr { 
    color: #56c2e1; 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #56c2e1; 
    margin: 10px 0; 
}

來源

2013-09-30 bflydesign

你嘗試過將自動換行：打破字;到你的CSS？ –

添加clear:both到#maintitle =）

來源

2013-09-30 14:49:39

添加overflow:hidden到#mainmenu。這將導致其高度包含所有浮動元素，例如您的#usermenu元素，從而允許流動繼續在其下方。

來源

2013-09-30 14:51:21

如果我添加overflow：隱藏到#mainmenu，所有按鈕在調整大小時都會消失。 – bflydesign

啊，那是因爲你設置了一個固定的「高度」。刪除。 –

使用此

<div id="maintitle" style="width:100%"> 
<h2>Welkom Bart</h2> 
<hr />

來源

2013-09-30 16:27:17 souvickcse

調整瀏覽器大小時的圖層位置

回答

相關問題