レスポンシブなデザインレイアウト

Question

私は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>

Answer 1

ねえ、それは応答作るとピクセルを使用して％で幅

.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%; 
 
}

<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>

Answer 2

は動的にどのように他のユニットとは異なり、あなたのdivのサイズを変更しません。 。

相対的な単位を使用してみてください。 これらの応答ユニットのサンプルは、％sおよびビューポート単位（vw、vh、vmin、vmax）です。

DEMO PAGE

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%; 
}