响应网站问题开放空间

Question

我遇到了一些代码的问题，我试图让这个网站反应灵敏，但是如果我缩小它并且该项目在＆＃34;＆＃34;另一个而不是旁边的它留下了很大的差距。 如果项目缩小到一定的最小宽度然后如果它不合适并且项目进入＆＃34;在＆＃34;另一个项目本身再次变大，所以它看起来很好，而不是留下一个很大的差距。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是您所需要的一切，请检查我希望您的工作https://jsfiddle.net/sandymizz/qsv0tzvr/

＆＃13;

＆＃13;

jute.maxbuffer=50000000

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试在CSS文件中使用媒体查询，如下例所示。 它肯定会解决你的问题。

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

Answer 3

您可以使用

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

为了使所有div居中，这将缩小差距。有关Flexbox

的更多信息，请参阅

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;