Question

＆＃13;

#div {}

img {
  height: 200px;
}

#img1 {
  float: left;
}

#img2 {
  float: right;
}

#img3 {
  float: right;
}

＆＃13;

<div id="div">

  <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">

  <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">

  <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">

</div>

＆＃13;

目前，当您水平缩小屏幕时，图像会垂直堆叠，我不想要，我希望它们都保持在同一水平线上。

我正在寻找如何做以下事情：

当图像开始与另一张图像重叠时，图像会消失。
当图像开始重叠时，使图像向右推过垂直滚动条。

我要求两者的原因是因为我现在有两个项目，每个项目都要求其中一个，我不知道该怎么做：P

如果可能的话，我也想避免使用@media屏幕和（max-width：--- px）。

Answer 1

您需要为每个图片添加单独的div，并按display: flex元素排列。同时使用margin来对齐flex div内的内容。

#div {
  display: flex;
}

.new {
  max-height: 200px;
}

.left {
  margin-right: auto;
}

img {
  max-width: 100%;
  max-height: 200px;
}

@media (max-width: 768px) {
.hidden-xs {
  display:none;
}
}

<div id="div">

  <div class="new left">
    <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
  </div>

  <div class="new hidden-xs">
    <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
  </div>

  <div class="new">
    <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
  </div>

</div>

Answer 2

试试此代码

＆＃13;

#div::after {
  display: table;
  content: "";
  clear: both;
}

#div img {
  float: left;
  width: 33.33%;
  max-width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="demonstration.css" type="text/css">
  <title>Demo</title>
</head>

<body>

  <div id="div">

    <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">

    <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">

    <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">

  </div>

</body>

</html>

＆＃13;

Answer 3

试用此代码::

＆＃13;

    ul.img {
      margin: 0;
      padding: 0;
      white-space: nowrap;
      width: 500px;
      overflow-x: auto;
    }
    
    ul.img li {
      display: inline-block;
      width: 200px;
      height: 200px;
    }

＆＃13;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="demonstration.css" type="text/css">
        
    </head>
    
    <body>
        <ul class="img">
      <!-- Inline styles added for demonstration purposes only. -->
      <li style="background-color: #000"></li>
      <li style="background-color: #cdc"></li>
      <li style="background-color: #fed"></li>
    </ul>
    </body>
    </html>

＆＃13;

Answer 4

尝试此代码，并根据需要修改图像高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="demonstration.css" type="text/css">
  <title>Demo</title>
  <style>
    #div {
        display: flex;
        flex-wrap: wrap;
    }
    #div img{
        width: 33.33%;
        height: 200px;
    }

  </style>
</head>

<body>

  <div id="div">

    <img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">

    <img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">

    <img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">

  </div>
</body>

</html>

Answer 5

问题是你使用浮动进行定位。

当容器变得太小时，浮动将自动移动到新行。

您可以将图像容器的大小设置为600px的宽度，而不调整大小，当窗口变小时，图像将保留在原位。

或者你可以使用我想要的固定位置。

    #img1  {
        position: fixed;
        width:200px;
        left: 0px;
        top: 0px;
        border: 0px;
        padding: 0px;}
    #img2 {
        position: fixed;
        width:200px;
        left: 200px;
        top: 0px;
        border:0px;
        padding: 0px;}
    #img3 {
        position: fixed;
        width:200px;
        left: 400px;
        top: 0px;
        border: 0px;
        padding: 0px;}

Answer 6

如果您不关心图像调整大小，则将div的最小宽度设置为图像宽度的总px总和。这样，您的容器就更少了。

当屏幕水平缩小时，如何防止同一行上的图像移动到不同的行？

6 个答案: