Question

我有一个Wordpress网站。我更改了页脚以包含五个div，其中包含图像。

这是页脚的 html 代码：

<footer class="site-footer">
        <div class="table">
            <div class="logo-gallery">
                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div>

                <div class="logo">
                    <a href="link"><img src="image_url"></a>
                </div><!-- .logo -->
            </div><!-- .logo-gallery -->
        </div><!-- .table -->
    </footer>

css 我想出了这个：

/* Footer */  
.site-footer {
    background-color: #e8e5ce;
    /*min-height: 180px;*/
}

.site-footer .table {
    display: table;
    width: 80%;
    margin: 0 auto;
}

.site-footer .logo-gallery {
    display: table-row;
}

.site-footer .logo {
    display: table-cell;    
}

在桌面计算机上，图像现在显示为我希望它们：
1.它们占据宽度的80％（使它们彼此更接近）
2.它们（作为一个组）水平放置在屏幕的中心。

我想让图像适合更小的屏幕（手机或平板电脑） - 现在当我尝试缩小浏览器窗口的尺寸并且图像位于窗口的右边缘时，我得到一个水平滚动条（I尚未用手机检查此代码）。

在较小的屏幕上，我希望它们变小以适应宽度（全部为五个）或显示在彼此之下（背景颜色在下方拉伸）。

我还有第二版css 。这里的问题是，在缩小浏览器窗口时（以及在手机上检查：http://npozp.pl/）

，图像会聚集在一起

/* Footer */

.site-footer {
    background-color: #e8e5ce;
    min-height: 180px;
}

.site-footer .logo-gallery {
    margin: auto;
    width: 70%;
}

.site-footer .logo {
    float: left;
    width: 20%;
    height: auto;
    padding: 30px 15px;
}

我正在寻找一种方法来执行此操作，它可以是上述代码之一修复或请建议我可以采取的方法。

感谢阅读！： - ）

Answer 1

请考虑使用媒体查询，以便您可以使用设备的像素大小来操作布局。

您的css调整应如下所示：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
   .site-footer .logo {
   width: 100%;
  }
}

正如您所看到的，可以更改混合和最大设备宽度值，您可以添加多个媒体查询以充分利用布局。

响应的页脚，在div中有一些图像

1 个答案: