Question

我有一个div，其中包含五个img标记。这是html代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">

</head>
<body>
    <div class="container">
        <img src="Images/1.jpg"/>
        <img src="Images/2.jpg"/>
        <img src="Images/3.jpg"/>
        <img src="Images/4.jpg"/>           
    </div>
</body>
</html>

这是样式表：

img
{
    position:relative;
    border:1px solid red;
    width: 250px;
    height: 150px;
    margin-left:auto;
    margin-right: auto;
}

.container
{
    position:relative;
    margin: 0 auto;
    width: 80%;
    border:1px solid red;
    border-radius:10px;
    padding:10px;
}

当我调整浏览器窗口的大小时，一切都搞砸了。

这是正常形式 enter image description here

这是调整大小后的表格

enter image description here

我希望照片留在他们的位置。我该如何解决这个问题？

Answer 1

将white-space:nowrap;添加到您的.container div：

.container {
    position:relative;
    margin: 0 auto;
    width: 80%;
    border:1px solid red;
    border-radius:10px;
    padding:10px;
    white-space:nowrap;
}

Answer 2

删除位置：相对并尝试使用float：left或center

Answer 3

将.container的宽度设为像素而不是％。如果你有4 div给出宽度（.container）为1000px（4 * 250）。

级联样式表定位麻烦

3 个答案: