Question

请有人帮助我，因为我正在学习网络开发。我面临两个问题 1：如何将所有图像与我上一张图像相同的行中的所有图像对齐 2：图像下方的价格我想在图像的最后一个角落正确

    [<section id ="featured">
            <ul>
                <li>
                <img src="C:\xampp\htdocs\psdword\images/thumb-1.jpg">
                    <a href="">Fugiat nulla sint</a>
                    <span>$30</span>
                    <span class="rating"></span>
                </li>
                <li>
                <img src="C:\xampp\htdocs\psdword\images/thumb2.jpg">
                    <a href="">Daute irure dolor</a>
                    <span>$24</span>
                    <span class="rating"></span>
                </li>
                <li>
                <img src="C:\xampp\htdocs\psdword\images/thumb3.jpg">
                    <a href="">Officia deserunt mollit</a>
                    <span>$60</span>
                    <span class="rating"></span>
                </li>
                <li>
                <img src="C:\xampp\htdocs\psdword\images/thumb4.jpg">
                    <a href="">Pim minim veniam</a>
                    <span>$17</span>
                    <span class="rating"></span>
                </li>
                </ul>
            </section>

    #featured ul{
    padding: 0;
}
#featured li{
    float: left;
    width: 23%;
    margin: 1%;
    list-style-type: none;
}
#featured li img{
    width: auto;
    margin-bottom: 10px;

}
#featured li a{
    color: #333;
    text-decoration: none;
    float: left;
}
#featured li span{
    float: right;
    clear: left;
    color: #333;
}
#featured ul:after{
    content: "";
    display: block;
    clear: both;
}

请看这张图片 Screenshot

Answer 1

将#featured li添加到float:left并删除{{1}}

Answer 2

父容器必须足够宽以显示一行中的所有图像，否则它会将图像包装到新行。检查父元素的宽度。您可以调整父宽度或图像以使其适合。

请记住响应式网页设计。换句话说，页面如何在智能手机或平板电脑上呈现？您可能无法在一行中显示所有设备类型。

UI框架/库可以在这里提供帮助。网格布局广泛用于此目的。请参阅Bootstrap或Material Design Lite。

Answer 3

请记住响应式网页设计。换句话说，页面如何在智能手机或平板电脑上呈现？您可能无法在一行中显示所有设备类型。

您可以使用flex-box让元素使用用户屏幕尺寸所需的行数：

ul{  
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

我也不会设置li的百分比宽度。在手机上，这真的很小。

为了对齐跨度，您可以使li的宽度与img的宽度一样大

在同一行中对齐图像

3 个答案: