难以格式化组合库

Question

我试图构建一个投资组合页面，使用图像作为占位符，直到我部署了项目来填补这些插槽。我遇到了麻烦，试图格式化一个大的图像与它下面的2-4个较小的图像，所有的填充容器相等。

我已经尝试过W3学校如何在图像网格，响应图像网格和投资组合画廊的徒劳无功。

下面是有关代码的一节：

​

.content-section {
  margin-bottom: 20px;
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
}

.content-section div {
  border-left: 3px solid gray;
  width: 75%;
  padding: 20px;
  text-align: left;
}

.content-section h2 {
  width: 15%;
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  justify-content: right;
  padding-right: 10px;
}

.yoga img {
  width: 100%;
  border: 5px solid steelblue;
}

<section id="my-work" class="content-section">
  <h2>Work</h2>
  <div class="yoga">
    <img src="img\yoga.jpg" alt="Yoga Project">
  </div>
</section>

​

当我试图添加其他图像时，问题就出现了。h2和图像之间的边界要么移动，要么复制到新图像的旁边。

我希望这是一个适当的问题，我看了一下规则后才发帖。任何帮助都将是非常感谢的，如果有人能帮助我在正确的方向！我也链接了已部署的网站。

谢谢你！！

https://tnoonan88.github.io/Portfolio-Page/

Answer 1

使用弹性心理医生。此外，您需要一个CSS设计系统，以调整您的图像大小，然后定位。

flex收缩CSS属性设置了flex项的flex收缩因子。如果所有flex项目的大小都大于flex容器，则根据flex收缩项缩小到适合的范围。

Answer 2

)你可以用一个灵活的盒子来解决这个问题。所以这就是你要做的。

1. 更新index.html

 <div class="flex-container">
   <img class="img1" src="img/snow.jpg?raw=true" alt="Snow Report">
   <div class="flex-container-sub">
     <img src="img/trail-running.jpg?raw=true" alt="Yoga Project">
     <img src="img/yoga.jpg?raw=true" alt="Trail Finder">
   </div>
 </div>

1. 更新style.css

.flex-container-sub {
  width: 100%;
  display: flex;
  justify-content: 'space-between';
}

.flex-container-sub img:nth-child(1) {
  width: 50%;
  padding-top: 10px;
}

.flex-container-sub img:nth-child(2) {
  width: 50%;
  padding-top: 10px;
  padding-left: 10px;
}

.content-section .flex-container {
  border-left: 3px solid gray;
  width: 75%;
  padding: 20px;
  text-align: left;
}

我还从内容部分删除了div选择器，因为如果您有这个选项，它中的任何div都将具有边框左属性，我假设您不想这样做。但这不是问题所在。

所以我要做的是，我把你想要的2张图片加到一个div中。div的显示形式为space-between，显示为flex和them content，以便将它们均匀地分隔开来。你可以读到它，这里。

nth-child选择器用于选择图像以给它们填充。使用flex最酷的一点是，在添加填充时要考虑到宽度。所以我选择第一个图像(nth-child(1))，给它50%的宽度，和一个填充顶部。接下来，我选择第二个图像(nth-child(2))并执行相同的操作)，但在左边添加一个填充。或者，您也可以向这些图像添加单独的类，并且也可以这样做！

下面是演示：https://jsfiddle.net/to6gzqem/28/