gpt4 book ai didi

html - 带有 h1 和 p 的文本旁边的图像

转载 作者:可可西里 更新时间:2023-11-01 14:50:11 27 4
gpt4 key购买 nike

我正在创建一个网站,并试图将文本与图像对齐。这听起来很简单,但出于某种原因,我似乎无法理解。

这是我如何尝试让图像和文本显示的图像:

http://i.stack.imgur.com/wJjmP.png

到目前为止,我已经尝试了以下 HTML:

<div class="example">
<div class="eg1">
<img src="eg1.gif" />
<h2>Example 1</h2>
<p>This is an example</p>
</div>
<div class="eg2">
<img src="eg2.gif" />
<h2>Example 2</h2>
<p>This is another example</p>
</div>
</div>

和 CSS:

.example {
display: inline-block;
}

.eg1, .eg2 > img {
float: left;
}

.eg1, .eg2 > h2 {
float: left;
}

.eg1, .eg2 > p {
float: left;
}

目前看来一切都搞砸了。它们出现在彼此下方,文本出现在图像的错误一侧。

实现此目标的最佳方法是什么?

最佳答案

可能是这样的?

<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>

http://jsfiddle.net/g57bB/7/

关于html - 带有 h1 和 p 的文本旁边的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21082626/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com