Question

我正在创建一个响应式设计布局，但努力实现某些目标。

我想创建一个照片库，每行显示尽可能多的照片，每张照片的最小宽度为300像素。宽度应取决于屏幕尺寸。

例如，iPhone屏幕只能容纳1张这样的宽度，所以它应该每行显示1张照片，填充iPhone屏幕的100％屏幕宽度，并将其他照片分成不同的行。我希望我足够清楚。

这是我的代码：

 <div style="width:100%;">

    <div style="display:inline-block;width:32%;">
         <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
    </div>

    <div style="display:inline-block;width:32%;">
         <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
    </div>

    <div style="display:inline-block;width:32%;">
         <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
    </div>

 </div>

这在纯CSS中是否可行，或者它需要JS？

Answer 1

<div style="display:inline-block;width:32%;float:left">
     <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
</div>

<div style="display:inline-block;width:32%;float:left">
     <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
</div>

<div style="display:inline-block;width:32%;float:left">
     <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
</div>

一旦你漂浮，你永远不会回去。

Answer 2

floating div应该有效：

工作示例：http://jsfiddle.net/nivas/2CN6B/。单击“增长”和“缩小”按钮以查看这是否是您想要的。

<div id="container">
    <div class="image">Image</div>
    <div class="image">Image</div>
    <div class="image">Image</div>
    <div class="image">Image</div>
    <div class="image">Image</div>
    <div class="image">Image</div>
    <div class="image">Image</div>
</div>

CSS：

.image {
    width: 3em;
    height: 3em;
    float: left;
}

#container {
    width: 10em;
    height: 10em;
}

Answer 3

也许媒体查询有助于您在大屏幕和小屏幕之间有所区别。

<div id="container">
    <img src="/images/test.png"/>
    <img src="/images/test.png"/>
    <img src="/images/test.png"/>
    <img src="/images/test.png"/>
    <img src="/images/test.png"/>
    <img src="/images/test.png"/>
</div>

和样式表

img{
/* position as many at one line as possible */
    float: left;
    min-width:300px
}
@media (max-width: 480px) {
/* handle small screens */
    img{
        width: 100;
        float: none;
    }
}

css-tricks.com: CSS Media Queries & Using Available Space

的更多信息

Answer 4

媒体查询，并将图像放大到正确的％，具体取决于在最小宽度要求的行中可以保留多少个。

@ max-width 300（左右）; img宽度100％

@ 300到600 {img width 50％}

@ 600到900 {img width 33％}

......等等......

最后： img min-width：300px;

根据屏幕尺寸</div>将<div> -s彼此相邻对齐

4 个答案: