响应式网站问题广场

Question

我遇到了一些代码问题，即时尝试让网站响应，但是如果我将其缩小并且该项目在另一个“下”而不是旁边它会留下很大的差距。 如果物品收缩到一定的最小宽度，如果物品不合适，物品在另一个物品下“物品”再次变大，所以它看起来不错，而不是留下很大的空白。

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>

Answer 1

您可以使用

display: flex; 
flex-wrap: wrap; 
justify-content: center; 

为中心的所有的div，这将减少差距。查看更多关于Flexbox

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;  
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

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

Answer 2

这里是你所需要的，请我希望你https://jsfiddle.net/sandymizz/qsv0tzvr/

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: 0 5%; 
 
    width: 40%; 
 
    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%; 
 
    } 
 
    
 
    @media all and (max-width:767px){ 
 
     .item { 
 
    width: 90%; 
 
    } 
 
    }

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

Answer 3

尝试worls使用媒体查询在你的CSS文件如下面的例子。 它一定会解决你的问题。

@media screen and (min-width:320px) and (max-width:480px) 
{ 
    //insert your code here 
}