html - 每行三列 HTML

Question

我正在尝试创建这样的东西:

我想知道我究竟如何才能创造出这样的拇指。请注意，我使用的是 WP 而不是使用 Bootstrap。那么我怎样才能更正我的代码以使其看起来与上图完全一样并且它必须响应。

代码如下:

<h3>Includes the following:</h3>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

JSFIDDLE:https://jsfiddle.net/p8gkjszg/ 任何想法？谢谢!

Answer 1

ul li {
    display: inline-flex;
    margin-left: 20px;
    width: 150px;
    margin-bottom: 50px;
}
ul li img {
    width: 100%;
    height: 150px;
}
h4 {
    position: relative;
    top: 135px;
    right: 130px;
    font-size: 12px;
}
ul li a {
    position: relative;
    top: 162px;
    right: 125px;
}

<h3>Includes the following:</h3>

<ul><li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>
</ul>

<ul>
<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>
  </ul>