css - 如何将 4 张图片放在一边，并在每张图片下方放置文字？

Question

我只想用 HTML 和 CSS 来完成这个

来自 bbc.com 的另一个例子

我希望它们彼此分开。

这是我到目前为止编写的代码

        .newsitems {
        display : inline-block;

        }

<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

Answer 1

不幸的是我现在不能发布代码，但这很简单将所有 div 显示为 block 在div中添加图像，然后将文本也写在 div 中然后在 CSS 中添加如下内容:.divname{position:absolute；

}然后设置右/左、上/下位置的适当值(px)，并设置宽度和高度