Question

当我缩小屏幕时，它看起来就像在图像中那样。我把它作为Visual Composer的“原始HTML”选项，最初有4项布局，工作正常。我在桌面视图上更改了6列布局的百分比（平板电脑上有3个），但这只是显示不正确。

请帮帮忙？

CSS

.contentBox {
    padding: 0;
        text-align: center;
}
.allImg {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.arrow,
.collectionCopy {
    display: inline-block;
    float: left;
    margin: 0 auto;
    vertical-align: top;
}
.collectionCopy a p {
    text-align: left;
}
.arrow {
    min-height: 14px;
    min-width: 14px;
}

.collectionCopy p {
    display: block;
    font-size: 100%;
    padding: 0 0 5px 5px;
    margin-bottom: 0;
}

.collectionCopy p:first-child {
    color: #000000;
    font-weight: bold;
            margin-top: -4px; 
}

.collectionCopy p:last-child {
    color: #676767;
    font-color: #e1e1e1;
            margin-top: -4px;
            margin-left: 0;
}

.collectionInfo {
    display: block;
    margin-top: 15px;
}

.collectionInfo a,
.arrow a {
    text-decoration: none;
}

.collectionImg {
    float: left;
    padding: 16px 8px;
    width: 16.66%;
        margin: 0 auto;
}

.collectionImg a img {
    display: block;
    width: 100%;
            margin: 0 auto;
}

@media screen and (min-width: 420px) and (max-width: 995px) {
    .collectionImg {
        width: 33%;
        padding: 8px;
    }
}

@media screen and (min-width: 320px) and (max-width: 420px) {
    .collectionImg {
        float: none;
        width: 100%;
        margin-bottom: 32px;
    }

    .allImg {
        padding: 0;
    }

}

HTML

    <div class="allImg">

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_espresso_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_sable_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT850_toffee_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_espresso_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_sable_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT850_toffee_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

    </div> <!-- end allImg -->

</div> <!-- end contentBox -->

Answer 1

尝试将以下CSS规则添加到此媒体查询中的CSS文件

@media screen and (min-width: 420px) and (max-width: 995px)

.collectionImg:nth-child(4n+0){
    clear:left;
}

<强> Example

More about :nth-child pseudo class

响应式布局无法在Wordpress上正常显示

1 个答案: