Question

我想要一个div在一个可滚动的行中包含多个图像。如果我用长字符串替换图像，但以下代码有效，但不适用于图像。

<html>
<div style="overflow: auto">
<img src="a.jpg">
<img src="b.jpg">
<img src="c.jpg">
<img src="d.jpg">
</div>
</html>

Answer 1

它会起作用。也许white-space属性是你想要的？见下文：

div {
  width: auto;
  overflow-x: auto;
  white-space: nowrap;
}

<div>
  <img src="https://placehold.it/400x200">
  <img src="https://placehold.it/400x200">
  <img src="https://placehold.it/400x200">
  <img src="https://placehold.it/400x200">
  <img src="https://placehold.it/400x200">
  <img src="https://placehold.it/400x200">
  <img src="https://placehold.it/400x200">
</div>

Answer 2

请设置div的高度和宽度，以便它可以工作，见下面的例子

＆＃13;

<style>
.auto-div {
    background-color: #00FFFF;
    width: 400px;
    height: 300px;
    overflow: auto;
}


</style>

＆＃13;

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<div class="auto-div">

<img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" /><img src="https://www.w3schools.com/css/img_forest.jpg" />
</div>
</body>
</html>

＆＃13;

Answer 3

这里你没有给div标签任何高度和宽度，所以样式溢出：auto不适合你。

＆＃13;

 <div style="width:150px;height:150px;overflow:auto;border:1px solid black">
        <image src="images.jpg"></image>
        <image src="images.jpg"></image>
        <image src="images.jpg"></image>
        <image src="images.jpg"></image>

    </div>

＆＃13;

溢出：auto不适用于图像

3 个答案: