Question

我正在尝试为我之前做过的3D原型制作项目创建一个图像库。一切似乎应该没问题，但画廊的第二排向右移动，我不确定为什么。

这是HTML

<div id="thumbDiv" style="width: 60%; margin-left: 20%;">
        <img src="phone1.jpg" id="phone1">
        <img src="phone2.jpg" id="phone2">
        <img src="phone3.jpg" id="phone3">
        <img src="phone4.jpg" id="phone4">
        <img src="phone5.jpg" id="phone5">
        <img src="phone6.jpg" id="phone6">
</div>

这是CSS

#thumbDiv img{
    width: 30%;
    padding: 5px;
    float: left;
    }

这就是它的结果 Phone Gallery 有什么想法吗？

Answer 1

我不知道你的问题在哪里，但它在我的Chrome浏览器上运行正常。也许检查chrome的版本和你写的语言。（html5和css3）

#thumbDiv img {
            width: 30%;
            padding: 5px;
            float: left;
        }

<html>
<head></head>
<body>
<div id="thumbDiv" style="width: 60%; margin-left: 20%;">
    <img src="https://i.ebayimg.com/thumbs/images/g/fmgAAOSwNRdX2tiA/s-l225.jpg" id="phone1">
    <img src="https://i.ebayimg.com/thumbs/images/g/fmgAAOSwNRdX2tiA/s-l225.jpg" id="phone2">
    <img src="https://i.ebayimg.com/thumbs/images/g/fmgAAOSwNRdX2tiA/s-l225.jpg" id="phone3">
    <img src="https://i.ebayimg.com/thumbs/images/g/fmgAAOSwNRdX2tiA/s-l225.jpg" id="phone4">
    <img src="https://i.ebayimg.com/thumbs/images/g/fmgAAOSwNRdX2tiA/s-l225.jpg" id="phone5">
    <img src="https://i.ebayimg.com/thumbs/images/g/fmgAAOSwNRdX2tiA/s-l225.jpg" id="phone6">
</div>
</body>
</html>

第二排图库

1 个答案: