Question

我有一个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;
    }
}

Answer 1

从flex-wrap:wrap移除.images。 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>

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

1 个答案: