Question

我从3天开始处于这种情况，我没有找到任何问题的答案：如何在列上放置相同宽度的div（包含宽度为320px的图像）（已完成）但不是排队？

让我加入一个小草图来解释一下：在左边，这就是我的意思。在右边，这是我想要的。（当减小屏幕/导航器的宽度时，第二行是“媒体屏幕”：所以有4到3到2比1（反之亦然）。照顾盒子的数量）：

croquis of what I have and what I want

为了解释我如何获得这个正确的部分，这里是代码：

HTML：

<div class="box">
<a href="#"><img src="#" alt=""/></a>
</div>

这一类的继承，它可以直接在身体上。这个盒子很重要，因为我可能需要做点什么或其他事情。

的CSS：

.box {
    position: relative;
    float: left;
    min-width: 340px;
    max-width: 24.80%;
    width: 24.79%;
    margin: 20px 0px 20px 0px;
}

@media only screen and (max-width: 1800px) {
    .box {
        min-width: 360px;
        max-width: 33%;
        width: 33%;
    }   
}

要完成这个问题，这里有一个限制：它必须是动态的和通用的（就像那样，我只需要制作一个div的副本并替换图像的链接（在添加php和js之前），或添加我想要的任何东西。）

Answer 1

你应该查看jQuery Masonry（http://masonry.desandro.com），它完全符合你的需要。

如果您因某些原因无法使用Masonry，则应首先将您的页面拆分为列。然后在每列中堆叠div框。

Answer 2

我刚刚试图制作出像这样的照片和图片。我用七个div做了这个，所有都是相同的宽度加上它的所有图片都是320px大小相同。我没有试过宽度。没有媒体工作我也要学习它们:)

  <body>
    <div id='box1'>1</div>
    <div id='box2'>2</div>
    <div id='box3'>3</div>
    <div id='box4'>4</div>
    <div id='box5'>5</div>
    <div id='box6'>6</div>
    <div id='box7'>7</div>
  </body>


    /* css code!*/

     body
        {   
          margin: 0px;
        }

     #box1
        {
          width:450px;
          height:300px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-color: #da1;
          background-size:320px; 
          position:absolute;
          left:1px; 
        }

     #box2
        {
          width:450px;
          height:380px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          left:451px;
          background-color:#df4;  
        }   

     #box3
        {
          width:450px;
          height:195px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:0px;
          left:901px;
          background-color:#dd6; 
        }   

     #box4
        {
          width:450px;
          height:658px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          left:1px;
          top:300px;
          background-color:#ced; 
        }           

     #box5
        {
          width:450px;
          height:578px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:380px;
          left:451px;
          background-color:#cbb;
         }   

     #box6
         {
          width:450px;
          height:470px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:195px;
          left:901px;
          background-color:#ad9;    
         }

     #box7
         {
          width:450px;
          height:298px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:660px;
          left:901px;
          background-color:#d8f;
         }

CSS在同一列上有图像，但行不同

2 个答案: