我遇到了一些代碼問題,即時嘗試讓網站響應,但是如果我將其縮小並且該項目在另一個「下」而不是旁邊它會留下很大的差距。 如果物品收縮到一定的最小寬度,如果物品不合適,物品在另一個物品下「物品」再次變大,所以它看起來不錯,而不是留下很大的空白。響應式網站問題廣場
body {
margin: 5% 7%;
background-color: #A07429;
}
main {
overflow: hidden;
background-color: #F2C473;
border: 2px solid black;
border-radius: 80px;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 6vw;
padding-right: 11vw;
}
.item {
margin-left: 5vw;
min-width: 250px;
max-width: 320px;
width: 100%;
float: left;
vertical-align: middle;
background: #543E18;
text-align: center;
color: white;
font-size: 200%;
margin-bottom: 10%;
display: inline-block;
}
img.itemimg {
width: 90%;
margin: 5%;
}
<main>
<div class="item"><img class="itemimg" src="media/pic1.JPG" alt="refresh!">
<p>link1</p>
</div>
<div class="item"><img class="itemimg" src="media/pic2.jpg" alt="refresh!">
<p>link2</p>
</div>
<div class="item"><img class="itemimg" src="media/pic3.jpg" alt="refresh!">
<p>link2</p>
</div>
<div class="item"><img class="itemimg" src="media/pic4.jpg" alt="refresh!">
<p>link1</p>
</div>
</main>
太感謝你了!這有幫助! 其他評論哪裏好,但這個幫助最大。謝謝! –