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 - 缩放时布局中断

回答

相关问题