0

I have some problem with my layout. It looks good on my computer when I zoom to 100%. But when I zoom in or out the layout breaks. I tried several ways to wrap the layout but it didn't work so far. Since I need the layout to be responsive, any help is appreciated.

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/

4

3 回答 3

1

在您的 .css 中，您使用 .css 为您的元素提供特定大小px。如果您希望您的布局与您的屏幕一起调整大小，您应该使用%（即屏幕大小的百分比）将大小应用于您的元素。这样，当您的屏幕尺寸发生变化时，您的元素将相对于它调整大小，从而保持您的布局不变。

于 2013-08-22T10:51:19.863 回答
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;
   }
于 2013-08-22T11:07:36.993 回答
0

我会添加一个 .wrapper 类并更改 .low_wrapper { position:relative} 而不是绝对

.wrapper {
width:960px;
}

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

}

见例子：http: //jsfiddle.net/MsUTp/2/

于 2013-08-22T11:39:03.783 回答