我有一个 fiddle我通过查看下面的屏幕截图复制了它。屏幕截图在桌面/移动/平板电脑 View 中应该完全相同。
此刻，我的 fiddle 在桌面 View 中看起来非常好。
为了在桌面 View 中以直线对齐图像，我在 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;
}
在移动 View 中，图像变得杂乱无章(如下面的屏幕截图所示)。
问题陈述:
我想知道我应该在 fiddle 中添加哪些 CSS 代码，以便图像在移动设备/平板电脑 View 中都对齐成一条直线。
我很确定，我必须使用媒体查询才能将图像对齐成一条直线，但我不确定我需要在那里添加哪些 CSS 代码。我尝试在媒体查询中使用以下 CSS 代码，但没有成功。
@media only screen and (max-width: 768px) {
.images {
width: 100%;
}
.images img {
width: auto;
height: 2.5rem;
}
}
最佳答案
从 .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>关于html - 在 html/css 的移动 View 中以直线对齐图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50403055/