如何将两个 img 彼此相邻放置在桌面上，但只有一个用于移动设备

Question

对于移动设备，应该只显示一张图片，但对于桌面设备，应该有两个并排显示的图片。两张图片在一个部分，但分开 div。 Picture of HMTL section here with the images 如何在桌面上显示第二张图片并将它们并排放置。我试过使用 float 但它取消了 display: block 并且第二个图像不会显示。 Picture of my CSS styling using @Media queries

Answer 1

我们的CSS代码如下。图片 css :

img {
height: auto;
max-width: 100%;
}
.image-table {
border: 0px solid rgba(0, 0, 0, 0);
border-collapse: separate;
border-spacing: 6px;
table-layout: fixed;
text-align: center;
width: 100%;
}
.image-table img {
border: 10px solid #fff;
box-sizing: border-box;
-webkit-box-shadow: 0 0 10px #999;
box-shadow: 0 0 10px #999;
}
#sec-profil .col-md-3{          
    clear: both !important;
}

我们的HTML代码如下

<table  class="image-table">
<tbody>
<tr>
<td>
<img id="sec-profil"  src="img-link-1" alt="" title="">
</td>
<td>
<img  id="sec-profil"  src="img-link-2" alt="" title="">
</td>
<td>
<img  id="sec-profil"  src="img-link-3" alt="" title="">
</td>
</tr>
</tbody>
</table>

Answer 2

使用网格（或弹性框）并排显示图像。如果你想在图像之间使用一些 space，请使用 grid-gap（如果你不想要它，就把它去掉）。要在移动设备上隐藏第二张图片，请使用显示：none 然后在桌面上显示：块。

这是一个关于如何使用网格的示例：

<div class="container">
    <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/goose-mages.jpg" alt=""/>
    <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/goose-images.jpg" alt="" class="display-none-mobile"/>
</div>


    .container {
        display: grid;
        grid-gap: 1rem;
    }
    .display-none-mobile {
        display:none;
    }
     @media (min-width: 600px) {
       .container {
       /* if you want one image to take more with you ca set 2fr 1fr or 3fr 2fr */
           grid-template-columns: 1fr 1fr;
       }
       .display-none-mobile {
           display:block;
       }
    }
    /* this is so the images don't take to much width, will be applied to all images */
    img {
        max-width: 100%;
    }

Answer 3

删除浮动并将内联块应用于样式中的 div，您的图像将内联。

.desktop-picture {
  display:inline-block
}

Answer 4

确保 .desktop-picture 默认设置为 display: none;，然后在媒体查询中将其设置为 display: inline;。

Answer 5

我强烈建议不要使用 float。这是一个使用 flex 和 flex-flow 的示例，媒体查询更改为 flex-flow: row; 以并排对齐图像。

.parent {
  display: flex;
  flex-flow: column;
  width: 50%;
  margin: auto;
}

img {
  max-width: 100%;
}

@media only screen and (max-width: 600px) {
  .parent {
    flex-flow: row;
    justify-content: center;
  }
}

<div class="parent">
  <img src="https://dummyimage.com/200/#ffd11/blue">
  <img src="https://dummyimage.com/200/#ffd11/blue">
</div>

另一个例子 grid。

.parent {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

img {
  max-width: 100%;
}

@media only screen and (max-width: 600px) {
  .parent {
    grid-template-columns: 1fr 1fr;
  }
}

<div class="parent">
  <img src="https://dummyimage.com/200/#ffd11/blue">
  <img src="https://dummyimage.com/200/#ffd11/blue">
</div>

如何将两个 img 彼此相邻放置在桌面上，但只有一个用于移动设备

How to place two img next to each other for desktop but only one for mobile

html

css

image

css-float