Html 一行中的所有图像，或彼此下方的所有图像

我希望一行有三个图像，如果这三个图像的总宽度不适合浏览器窗口，那么所有三个图像都应该在彼此下方。所以这是“要么全有，要么全无”，不应该只有两个图像在旁边，一个在下面（这种情况发生后，您可以使用

float:left；

在所有三个图像上逐渐减小浏览器窗口的宽度）

所有这些都应该在浏览器窗口中居中，无论窗口大小如何

我知道有限的CSS和HTML，但我使用以下代码将当前数据集中在窗口中：

*{
填充：0；
保证金：0；
}
html，正文{
身高：100%；
}
桌子{
垂直对齐：中间对齐；
身高：100%；
保证金：0自动；
}

“图像和文本”

您可以使用媒体查询（简单+纯css），但需要设置断点（不灵活）：

或者您可以使用js（灵活+复杂）：

body.onresize=function（）{
var宽度=0；
images=document.getElementsByTagName（“图像”）；
用于（图像中的图像）{
宽度=宽度+图像宽度；
}
如果（宽度>窗口内部宽度）{
document.all.img.style.display=“inline block”；
}
}

我们只能使用纯CSS来解决这个问题，我们将使用CSS媒体查询。我将试着用一个例子来解释这个解决方案。为此，首先您应该准备好每个图像的宽度

例如，假设您想要的一个图像的宽度是

200px

，那么您也希望图像之间有一些空间作为边距，因此假设浏览器宽度大于

700px

，那么我们将在同一行上有图像，否则，我们将在另一行下有一个图像。请参阅下面的代码以了解一个这样的实现

HTML可以如下所示：

<div class="container">
  <img src="img/one.jpg">
  <img src="img/two.jpg">
  <img src="img/tri.jpg">
</div>

---

您可以使用引导来实现这一点。单击完整页面按钮并更改屏幕大小

@介质（最小宽度：768px）{
.内联块行。col-sm-4{
显示：内联块；
浮动：无；
}
}

内联块网格

如果您知道图像的宽度，您可以添加一个

@media

查询，该查询将改变容器的

宽度和
伸缩方向
从
行
到
列

例如取
img
，该img包含在
div
中，所有
div
都集中包含在
部分中

如果图像的宽度为
240px
，边距为
20px
（两侧），并且包含图像的
div
具有
2px
边框（两侧）和
24px
边距（两侧），则

包含三个
分区的
分区
的宽度为：

3*（
24px
+
2px
+
20px
+
240px
+
20px
+
2px
+
24px
）=
996px

如果随后对文档的
正文设置样式，使其具有：

body {
margin: 12px;
padding: 0;
}

您将知道，当主体的宽度小于
12px
+
996px
+
12px
-或
1020px
时，图像行必须转变为图像列

然后您可以设置您的
@媒体
查询：

@media only screen and (max-width: 1020px) {

.set {
flex-direction: column;
width: 332px;
}

}

完整示例：


正文{
利润率：12像素；
填充：0；
}
.设置{
显示器：flex；
弯曲方向：行；
宽度：996px；
保证金：0自动；
背景色：rgb（227）；
}
.set项、.set项图像{
显示：块；
}
.设定项目{
宽度：280px；
高度：320px；
利润率：24px；
背景色：rgb（255255）；
边框：2个实心rgb（191）；
}
.设置项目图像{
宽度：240px；
高度：240px；
保证金：20px 20px 8px；
背景色：rgb（191）；
}
.设置项目文本{
保证金：0；
填充：0；
文本对齐：居中；
}
@仅介质屏幕和（最大宽度：1020px）{
.设置{
弯曲方向：立柱；
宽度：332px；
}
}

图1
图2
图3
图像的总宽度是否固定？
.container
{
  width:100%;
  text-align:center;
}
.container img
{
  display:inline-block;
  width:200px;
  margin:15px;
}

/*Next block will be followed when browser width is less than 700px*/
@media screen and (max-width:700px)
{
  .container img
  {
    display:block;
    margin:auto;
    width:100%;  /*Use this line only if you want the image to occupy full width*/
  }
}

body {
margin: 12px;
padding: 0;
}

@media only screen and (max-width: 1020px) {

.set {
flex-direction: column;
width: 332px;
}

}