如何使用html和css创建3列图像网格？ [英] How to create a 3 column image grid using html and css?

问题描述

我很想知道创建类似于使用HTML和CSS附加的图像的图像网格的最佳做法。

I am interested to know what is the best practice to create an image grid similar to the image attached using HTML and CSS.

谢谢。

推荐答案

您可以像这样使用CSS flex容器。

You would use CSS flex container like so.

以下是示例CSS：

Here is sample CSS:

.flex-container {
  flex-direction:row;
  display: -webkit-flex;
  display: flex;
  background-color: grey;
  width: 100%;
  height: 100px;
  align-content: center;
  flex-flow: row wrap; 
}

.flex-item {
  background-color: lightblue;
  width: 40%;
  height: 100px;
  margin: 10px;
  order: 1;  
}

下面是示例HTML：

Here is sample HTML to go with it:

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
  <div class="flex-item">flex item 4</div> 
</div>

您需要采取这种技术并将其应用于您的情况。

You will need to take this technique and apply it your circumstances.

这篇关于如何使用html和css创建3列图像网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！