Question

我正在尝试使图像适应窗口的大小。如果没有足够的宽度，则元素应该下降。我已尝试在不同的类上使用静态，相对，固定和绝对位置但没有效果。

CSS

body {
    background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1100px) {
    #columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

#columns:hover .pin:not(:hover) {
    opacity: 0.4;
}

标记：

<div id="wrapper">
    <div id="columns">
        <div class="pin">
            <img src="http://help.1stanswer.de/lib/exe/fetch.php?media=im:detail:beispiel_dokument_vorlage_ohne_platzhalter.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. Nam ac elit risus, 
                ac blandit dui. Duis rutrum porta tortor ut convallis.
                Duis rutrum porta tortor ut convallis.
            </p>
        </div>

        <div class="pin">
            <img src="http://siliconangle.com/files/2013/08/Stock-Market-Chart2.jpg" />
            <p>
                Donec a fermentum nisi. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
            </p>
        </div>
</html>

Answer 1

以下代码中的960px可以更改为适合您页面的任何值

@media (max-width: 960px) {
    #columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .pin {
        display: block;
        width: 100%;
    }
}

Answer 2

网格系统对您解决此类问题非常有用。

Bootstrap有一个：http://getbootstrap.com/css/#grid

另外：http://purecss.io/grids/

Answer 3

您可以在column-width元素上设置#columns并结合column-count属性，以定义最大列数和每个列的最小宽度。同时删除min-width元素上的.wrapper属性。

在适当的宽度，包装将允许列水平堆叠，最大宽度为3。在较小的宽度处，column-width属性确定包装器强制它们换行到换行符的点。

来源：https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-4

示例：https://jsfiddle.net/Bendrick92/8df15zsr/

body {
    background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}

#wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

#columns:hover .pin:not(:hover) {
    opacity: 0.4;
}

<div id="wrapper">
    <div id="columns">
        <div class="pin">
            <img src="http://help.1stanswer.de/lib/exe/fetch.php?media=im:detail:beispiel_dokument_vorlage_ohne_platzhalter.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. Nam ac elit risus, 
                ac blandit dui. Duis rutrum porta tortor ut convallis.
                Duis rutrum porta tortor ut convallis.
            </p>
        </div>

        <div class="pin">
            <img src="http://siliconangle.com/files/2013/08/Stock-Market-Chart2.jpg" />
            <p>
                Donec a fermentum nisi. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
            </p>
        </div>
</html>

当我使窗口变小时，如何将元素置于彼此之下？

3 个答案: