如何将4张图片放在同一行并保持响应式设计

4
我需要在同一行上有4个等高但可变宽度的图像。当视口变小时,图像必须相应地调整大小并保持在同一行上
因此,类似于以下内容:
<div class="4images">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>  
</div>

这里应该使用哪种最佳的CSS?如果我使用
.4images  {
    width:100%;
    white-space: nowrap;
 }

 .4images img {
    display:inline-block;
 }

在大屏幕上我得到了期望的效果,但当我使用小设备时,最后一张图片会跑到下一行……我的想法是它们应该只是变小,仍然在同一行中。

请问有什么提示可以实现这个效果吗?

4个回答

5

如果你想保留图片的比例,可以使用flex,但避免将图片作为 flex 子元素

.flex {
  display:flex;
  }
.flex div {
  flex:1;
  margin:5px; /* need some space ?*/
  }
img {
  width:100%;
  }
<div class="flex">
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
</div>

你也可以尝试使用表格模型。

.table {
  border-spacing:5px; /* need some space ?*/
  display:table;
  table-layout:fixed;
  width:100%;
  }
.table div {
  display:table-cell;
  }
img {
  width:100%;
  }
<div class="table">
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
</div>


我原本想避免使用表格模型,但是“flex”非常适合这个任务。 - Wilko van der Ploeg
@WilkovanderPloeg flex或table不会在语义上改变标记。display:table;也包括ie8,但flex不包括,并且在IE11中仍存在错误,这里重要的是你想支持哪个浏览器;(CSS只样式化HTML,没有更多或更少)。 - G-Cyrillus

0

使用CSS flexbox布局非常简单易懂。以下是您所需的全部内容:

.images { display: flex; }

演示

当您建立一个弹性容器(通过将display: flexdisplay: inline-flex应用于元素)时,会生效几个默认规则。其中两个规则是flex-direction: rowflex-wrap: nowrap,这意味着子元素(也称为弹性项)将水平对齐而不换行。

关于您的类值(4images),虽然在HTML5中以数字开头是有效的(了解更多),但您需要转义该字符才能被CSS引擎识别。我仅为演示目的删除了数字。


0

第一点:
类名不能以数字开头。欲了解更多信息,请查看此处
E:好的,那是HTML4的规定。既然必须转义才能使用,那就不应该以数字开头,例如这里

第二点: 你可以像这样
CSS:

.images  {
width:100%;
}

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

注意:在宽度方面进行一些测试,有时浏览器计算不正确,因此您必须减少1%。


你的第一个观点是不正确的。你的来源(W3Schools)提供了过时的信息。https://dev59.com/83VD5IYBdhLWcg3wJIEK#31773673 - Michael Benjamin
另外,如果你在我的jsfiddle中将类“images”替换为“4images”,它就无法工作了... - user3528269
这是用于 ID 和类名的(详见答案)。 - Michael Benjamin
这仅适用于图像具有相同的宽度,但在我的情况下,它们具有不同的宽度,请参见原始问题。 - Wilko van der Ploeg

0
为了使图像具有响应性,您需要像下面这样更改类的定义:
 .4images img {
    width: 100%;
    height: auto;
 }

1
是的...但这远远不是回答问题的方法...一排4个响应式图片! - Wilko van der Ploeg

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接