我只想用 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>
最佳答案
不幸的是我现在不能发布代码,但这很简单 将所有 div 显示为 block 在div中添加图像,然后 将文本也写在 div 中 然后在 CSS 中添加如下内容: .divname{ position:absolute;
} 然后设置右/左、上/下位置的适当值(px),并设置宽度和高度
关于css - 如何将 4 张图片放在一边,并在每张图片下方放置文字?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49864467/