CSS窗口寬度調整大小問題

當我在瀏覽器上調整窗口大小時，我遇到了一些內容未固定到一個地方的問題，我基本上有3個div id框元素彼此相鄰放置。CSS窗口寬度調整大小問題

它們的位置很好，但是當我調整屏幕大小時，它們似乎低於另一個。

我有min-width: 947px;在CSS的主體，但是這沒有做任何事情。

HTML：

<div id ="featured1"> 

</div> 

<div id ="featured3"> 

</div> 

<div id ="featured2"> 

</div>

CSS：

#featured1{ 


float:left; 
font-family: 'Lobster13Regular'; 
font-size:35px; 
color:#9c5959; 
margin-top:20px; 
margin-left:150px; 
border:1px solid black; 
width:250px; 
height:150px; 

} 

#featured2 { 

display: inline-block; 
font-family: 'Lobster13Regular'; 
font-size:35px; 
color:#9c5959; 
margin-top:20px; 
border:1px solid black; 
width:250px; 
height:150px; 
} 

#featured3 { 
float:right; 
font-family: 'Lobster13Regular'; 
font-size:35px; 
color:#9c5959; 
margin-top:20px; 

border:1px solid black; 
width:250px; 
height:150px; 
margin-right:200px; 

}

因爲當我嘗試調整與此代碼的元素低於對方的屏幕某種原因，我要找的內容完全保持一樣，並沒有調整。

來源

2013-10-12 Ryman Holmes

這裏是工作示例：jsFiddle link

使用

display: inline-block;

在所有3個divs，那麼他們不會往下走。注意：此屬性不適用於IE7及更小版本。

您已給予您的身體min-width:947px，但所有divs佔用的實際寬度包括邊距和邊框等均爲1150px。這就是爲什麼它打破。

請所有的div

來源

2013-10-12 20:06:04 Gyandeep

當我輸入文本，它屬於一個箱子？ –

請在所有'divs'上添加'vertical-align：top;'屬性...如果遇到更多問題，請使用CSS進行遊戲。我的回答是基於你問的問題。 – Gyandeep

這將有助於增加vertical-align: top;財產。僅供參考。在CSS中編寫時，請確保縮小代碼。 Google開發者在這方面有一個很棒的部分（https://developers.google.com/speed/pagespeed/service/MinifyCSS）。

HTML：

<div id="container"> 
    <div id="featured1"> 
     Featured 1 
    </div> 
    <div id="featured2"> 
     Featured 2 
    </div> 
    <div id="featured3"> 
     Featured 3 
    </div> 
</div>

CSS：

#container { 
    position: absolute; 
    width: 836px; 
    height: 190px; 
    } 
#featured1, #featured2, #featured3 { 
    position: relative; 
    font-family: 'Lobster13Regular'; 
    font-size: 35px; 
    float: left; 
    left: 20px; 
    top: 20px; 
    width: 250px; 
    height: 150px; 
    border: 1px solid #000; 
    overflow: hidden; /*Remove if you are not going to overflow text in each element*/ 
    } 
#featured2, #featured3 { 
    margin-left: 20px; 
    }

來源

2013-10-13 03:48:02

CSS窗口寬度調整大小問題

回答

相關問題