在html / css中的移动视图中以直线对齐图像答案

【问题标题】：Aligning images in a straight line in a mobile view in html/css在html / css中的移动视图中以直线对齐图像
【发布时间】：2018-05-18 02:43:26
【问题描述】：

我有一个fiddle，我通过查看下面的屏幕截图复制了它。屏幕截图在桌面/移动/平板电脑视图中应该完全相同。

此时，我的小提琴在桌面视图中看起来非常好。

我在小提琴中使用的 CSS 代码是为了在桌面视图中以直线对齐图像：

.images {
  display: flex;
  justify-content: space-between;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  flex-wrap: wrap;
}

.images img {
  width: auto;
  height: 2.5rem;
}

在移动视图中，图像变得杂乱无章（如下面的屏幕截图所示）。

问题陈述：

我想知道我应该在小提琴中添加哪些 CSS 代码，以便 图像在移动/平板电脑视图中都以直线对齐。

我很确定，我必须使用媒体查询才能将图像对齐成一条直线，但我不确定我需要在那里添加哪些 CSS 代码。我尝试在媒体查询中使用以下 CSS 代码，但没有成功。

@media only screen and (max-width: 768px) {
    .images {
      width: 100%;
    }

    .images img {
      width: auto;
      height: 2.5rem;
    }
}

【问题讨论】：

您还可以将水平滚动添加到我认为针对特定图像 div 的移动视图。

标签： html css responsive-design media-queries

【解决方案1】：

从.images 中删除flex-wrap:wrap。 fiddle

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
      margin-left: -15px;
    margin-right: -15px;
}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.images img {
  max-width:100%;
  width: 100%;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


</head>

<body>

<div class="images">
<div>
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt=""  class="alignleft size-full wp-image-7013">
</div>
<div>
<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt=""class="alignleft size-full wp-image-7019">

</div>
<div>
<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" class="alignleft size-full wp-image-7088">

</div>
<div>
<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt=""  class="alignleft size-full wp-image-7068">

</div>

<div>
<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" class="alignleft size-full wp-image-7070">

</div>
<div>
<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt=""  class="alignleft size-full wp-image-7071">

</div>
<div>
<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" class="alignleft size-full wp-image-7072">

</div>
<div>
<img src="https://s31.postimg.cc/krrywwkpn/imageedit_1_5492997247.png" alt="" class="alignleft size-full wp-image-7072">

</div>

</div>
</body>

</html>

在移动设备中制作两行。

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  
}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
  max-width:100%;
  width: 100%;
}

@media screen and (max-width: 767px) {
.images {
flex-wrap: wrap;
}
.images > div {
    flex: 0 0 25%;
    max-width: 25%;
        padding-top: 10px;
    padding-bottom: 10px;
   
}

}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


</head>

<body>

<div class="images">
<div>
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt=""  class="alignleft size-full wp-image-7013">
</div>
<div>
<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt=""class="alignleft size-full wp-image-7019">

</div>
<div>
<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" class="alignleft size-full wp-image-7088">

</div>
<div>
<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt=""  class="alignleft size-full wp-image-7068">

</div>

<div>
<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" class="alignleft size-full wp-image-7070">

</div>
<div>
<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt=""  class="alignleft size-full wp-image-7071">

</div>
<div>
<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" class="alignleft size-full wp-image-7072">

</div>
<div>
<img src="https://s31.postimg.cc/krrywwkpn/imageedit_1_5492997247.png" alt="" class="alignleft size-full wp-image-7072">

</div>

</div>
</body>

</html>

【讨论】：