我的布局有些问题。当我缩放到100%时,它在我的电脑上看起来不错。但是当我放大或缩小布局时。我尝试了几种方法来包装布局,但到目前为止它还没有用。由于我需要布局能够做出响应,所以我们非常感谢您的帮助。
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;
}
答案 0 :(得分:1)
在.css中,您使用px
为元素指定了特定尺寸。如果您希望您的布局使用屏幕调整大小,则应使用%
(即屏幕大小的百分比)对元素应用大小。这样,当您的屏幕尺寸发生变化时,您的元素将相对于它调整大小,使您的布局保持不变。
答案 1 :(得分:0)
试试这个
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;
}
答案 2 :(得分:0)
我会添加.wrapper类并更改.low_wrapper {position:relative}而不是绝对
.wrapper {
width:960px;
}
.low_wrapper {
position:relative;
margin-left:30px;
margin-top:30px;
}