HTML CSS 响应式地将图像堆叠在两列中

Posted 2023-03-06

技术标签:

【中文标题】HTML CSS 响应式地将图像堆叠在两列中【英文标题】：HTML CSS responsively stacking images in two columns 【发布时间】：2018-05-22 22:23:19 【问题描述】：

<html>
<head>
<style>
.container 
    position: relative;
    width: 50%;


.image 
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;


.middle 
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)


.container:hover .image 
  opacity: 0.3;


.container:hover .middle 
  opacity: 1;


.text 
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;

</style>
</head>
<body>

<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
  
</body>
</html>

我想要实现的是使this 类型的效果响应地堆叠在两列中。（这样当我调整窗口大小时，图像不会被拉伸）

而我做不到。您能否指导我如何实现这种效果？我什至不能让两个图像在那个小提琴上并排堆叠，它们似乎总是像这样堆叠在一列中。

我尝试过将 Boostrap 与容器和 col-lg-6 一起使用，但没有成功。

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example 添加了一个片段。感谢您的反馈。 【参考方案1】：

您可以使用 display: flex 将图像容器包装在一个 div 中

根据评论更新

.wrapper 
  display: flex;
  flex-wrap: wrap;


.container 
  position: relative;
  min-width: 50%;


.image 
  opacity: 1;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  display: block;


.middle 
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)


.container:hover .image 
  opacity: 0.3;


.container:hover .middle 
  opacity: 1;


.text 
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;

<div class="wrapper">

  <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
  <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
   <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
   <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
   <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
   <div class="container">
    <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
    <div class="middle">
      <div class="text">John Doe</div>
    </div>
  </div>
</div>

【讨论】：

我只需要将图像堆叠成两列。这使得它们堆叠在 n 列中，以响应地调整它们的大小。很高兴知道有一种方法可以制作这样的东西，但这不是我想要实现的目标。 @Deividas 答案已更新。这里有一个很好的 flexbox 指南：css-tricks.com/snippets/css/a-guide-to-flexbox【参考方案2】：

只需内联块并确保设置宽度以使两个或多个窗口能够适应。简单。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .container 
        position: relative;
        width: 40%;
        display: inline-block;
    
    
    .image 
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
    
    
    .middle 
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%)
    
    
    .container:hover .image 
      opacity: 0.3;
    
    
    .container:hover .middle 
      opacity: 1;
    
    
    .text 
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      padding: 16px 32px;
    
    </style>
    </head>
    <body>
    
    <h2>Opacity with Box</h2>
    <p>Hover over the image to see the effect.</p>
    
    <div class="container">
      <img src="img_avatar.png"  class="image" style="width:100%">
      <div class="middle">
        <div class="text">John Doe</div>
      </div>
    </div>
    
    <div class="container">
      <img src="img_avatar.png"  class="image" style="width:100%">
      <div class="middle">
        <div class="text">John Doe</div>
      </div>
    </div>
      
    </body>
    </html>

【讨论】：

回复：其他答案：请记住，通常不鼓励将浮动作为最佳实践问题，在其他解决方案可用的情况下，这可能会导致意外结果。 Flexbox 对于这个问题来说是多余的，并且有不必要地破坏与旧浏览器的兼容性的风险，尽管这是一个有用的学习方法。由于这个问题涉及布局，我认为应该鼓励使用 flexbox（和网格），除非 OP 有限制阻止这一点。网格仍然是非常新的技术，据我所知，还没有非常重要的浏览器基础支持。使用 flexbox 对于大型项目通常很有价值，特别是在开发人员有足够的知识来实现 polyfill 等的情况下；同上网格，在很多方面。但一般来说，对于有简单问题的初学者来说，我发现简单的解决方案更合适，并倾向于优先考虑扎实正确地学习基础知识的方法。当然，我同意，您的回答对于 OP 的问题是完全正确的。我认为 Flexbox 正在迅速成为基础。关于 Grid，这里有一篇关于支持和后备的好文章 rachelandrew.co.uk/archives/2017/07/04/… 在将这些图像堆叠成两列后，我必须将它们居中。在将 float:left 值居中时遇到了很多麻烦，最终使用了更容易居中的建议。谢谢。【参考方案3】：

最简单的方法是使用 float:left 但您应该添加另一个元素来重置文档的流程，以便该元素应该具有 clear:both 属性。

<html>
<head>
<style>
.container 
    position: relative;
    width: 50%;
    float: left


.image 
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;


.middle 
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)


.container:hover .image 
  opacity: 0.3;


.container:hover .middle 
  opacity: 1;


.text 
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;

</style>
</head>
<body>

<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<div class="container">
  <img src="http://img.draugas.lt/forumas/veidukai/973676.gif"  class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>
<p style="clear: both;"></p>
  
</body>
</html>

【讨论】：

以上是关于HTML CSS 响应式地将图像堆叠在两列中的主要内容，如果未能解决你的问题，请参考以下文章

使用 Twitter Bootstrap 响应式地重新排序 div？

创建两列响应式 css html 设计，当缩小或在移动设备上查看时合并为 1 列

响应式页脚html

响应式菜单项 css 不堆叠在一起

3 列响应式 CSS（排序内容位置）

具有响应式堆叠的 Bootstrap 等高表单标签