我想让我的div响应。我已经使用width:100%;
和max-width: xx px;
创建了div,但在调整浏览器大小时它不会是一个反复无常的代码。有人可以帮我吗?
DEMO 页。
.container {
position:relative;
width:100%;
max-width:1010px;
margin:0px auto;
margin-top:50px;
overflow:hidden;
}
.coverItem {
float:left;
width:100%;
position:relative;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-color:#1d1f20;
}
.coverItem:nth-child(1) {
max-width:400px;
padding-top:385px;
margin-right:5px;
}
.coverItem:nth-child(2) {
max-width:350px;
padding-top:190px;
margin-right:5px;
}
.coverItem:nth-child(3) {
max-width:250px;
padding-top:190px;
margin-bottom:5px;
}
.coverItem:nth-child(4) {
max-width:190px;
padding-top:190px;
}
.coverItem:nth-child(5) {
max-width:215px;
padding-top:190px;
margin-left:5px;
}
.coverItem:nth-child(6) {
max-width:190px;
padding-top:190px;
margin-left:5px;
}

<div class="container">
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
</div>
&#13;
答案 0 :(得分:3)
嘿,要使其响应,宽度为%
.container {
position: relative;
width: 100%;
max-width: 1010px;
margin: 0px auto;
margin-top: 50px;
overflow: hidden;
}
.coverItem {
float: left;
width: 100%;
position: relative;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color: #1d1f20;
}
.coverItem:nth-child(1) {
max-width: 400px;
padding-top: 385px;
margin-right: 1%;
width: 39%;
}
.coverItem:nth-child(2) {
max-width: 350px;
padding-top: 190px;
margin-right: 1%;
width: 34%;
}
.coverItem:nth-child(3) {
max-width: 250px;
padding-top: 190px;
margin-bottom: 5px;
width: 25%;
}
.coverItem:nth-child(4) {
max-width: 200px;
padding-top: 190px;
width: 20%;
}
.coverItem:nth-child(5) {
max-width: 200px;
padding-top: 190px;
margin-left: 1%;
width: 19%;
}
.coverItem:nth-child(6) {
max-width: 200px;
padding-top: 190px;
margin-left: 1%;
width: 19%;
}
&#13;
<div class="container">
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
</div>
&#13;
答案 1 :(得分:2)
使用px不会像其他单位那样动态调整div的大小。
尝试使用相对的单位。 这些响应单位的样本是%s和视口单位(vw,vh,vmin,vmax)。
HTML
<div class="container">
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
<div class="coverItem"></div>
</div>
CSS
.container {
position:relative;
width:100%;
max-width:90%;
margin:0px auto;
margin-top:5%;
overflow:hidden;
}
.coverItem {
float:left;
width:100%;
position:relative;
border-radius:5%;
-webkit-border-radius:5%;
-moz-border-radius:5%;
background-color:#1d1f20;
}
.coverItem:nth-child(1) {
max-width:36%;
padding-top:35%;
margin-right:0.5%;
}
.coverItem:nth-child(2) {
max-width:32%;
padding-top:17.2%;
margin-right:0.5%;
}
.coverItem:nth-child(3) {
max-width:22.7%;
padding-top:17.2%;
margin-bottom:0.5%;
}
.coverItem:nth-child(4) {
max-width:17.2%;
padding-top:17.2%;
}
.coverItem:nth-child(5) {
max-width:19.6%;
padding-top:17.2%;
margin-left:0.5%;
}
.coverItem:nth-child(6) {
max-width:17.2%;
padding-top:17.2%;
margin-left:0.5%;
}