HTML CSS - 縮放時佈局中斷

我的佈局有些問題。當我放大到100％時，它在我的電腦上看起來不錯。但是當我放大或縮小布局中斷時。我嘗試了幾種方法來封裝佈局，但迄今爲止它無法工作。由於我需要佈局來響應，任何幫助表示讚賞。HTML CSS - 縮放時佈局中斷

HTML：

<body> 
<div class="low_wrapper"> 
<div id="intro" class="category"> 
<p><span class="category_description"><h1>Intro</h1></span></p> 
<div class="low_info_header" >head</div> 
<div class="low_info_element_big"></div> 
<div class="low_info_element_big"></div> 
<div class="low_info_header" >head</div> 
</div> 

<div id="women" class="category"> 
<h1>Women</h1> 
<div class="low_info_header" >head</div> 
<div class="low_info_element_big"></div> 
<div class="low_info_element_big"></div> 
<div class="low_info_header" >head</div> 
</div> 


</div> 
</body>

CSS：

body{ 
margin: 0 0 0 0 ; 
} 

.category h1{ 
float:left; 
width:940px; 
font-family:'Open Sans'; 
} 
.low_wrapper{ 
position:absolute; 
margin-left:30px; 
margin-top:30px; 
position:absolute; 
} 

#low_info{ 
margin: 0 0 0px 33px; 
width:940px; 
background-color: #ccc; 
float:left; 
} 

.low_info_header{ 
width:940px; 
height:120px; 
background-color:#FF0A83; 
float:left; 
position:relative; 
} 


.low_info_element_big{ 
height:400px; 
width:460px; 
background-color:#FF0A83; 
margin-top:10px; 
margin-right:20px; 
margin-bottom:10px; 
float:left; 
position:relative; 

}

http://jsfiddle.net/MsUTp/1/

來源

2013-08-22 Goot

首先所有當你要做出反應的時候，大多數人都會使用'％'，我不知道你做出了什麼樣的反應，我希望你不會期望這種流動性脫離這個 –

你最好看看在媒體查詢如果你想響應。 – Albzi

不，我不期待流動性。我只是不希望元素在縮放時浮動。 – Goot

在你的CSS你是給你的元素與px specfic大小。如果您希望您的佈局調整爲使用屏幕大小，則應使用%（即屏幕大小的百分比）將大小應用於元素。通過這種方式，當屏幕大小發生變化時，您的元素將相對於其大小調整大小，以保持佈局相同。

來源

2013-08-22 10:51:19 Paddyd

試試這個

body { 
    margin: 0 0 0 0 ; 
    } 

.category h1 { 
    width:940px; 
    font-family:'Open Sans'; 
    } 

.low_wrapper { 
    position:absolute; 
    margin-left:30px; 
    margin-top:30px; 
    position:absolute; 
    } 

#low_info { 
    margin: 0 0 0px 33px; 
    width:940px; 
    background-color: #ccc; 
    float:left; 
    } 

.low_info_header { 
    width:100%; 
    height:120px; 
    background-color:#FF0A83; 
    position:relative; 
    } 


.low_info_element_big { 
    height:400px; 
    width:460px; 
    background-color:#FF0A83; 
    margin-top:10px; 
    margin-right:20px; 
    margin-bottom:10px; 
    position:relative; 
    }

來源

2013-08-22 11:07:36

我在.wrapper類添加和更改.low_wrapper {位置：相對}，而不是絕對

.wrapper { 
width:960px; 
} 

.low_wrapper { 
position:relative; 
margin-left:30px; 
margin-top:30px; 

}

見例如：http://jsfiddle.net/MsUTp/2/

來源

2013-08-22 11:39:03 vzeke

HTML CSS - 縮放時佈局中斷

回答

相關問題