Html CSS浮动图像<；img>；不超过标题<；h2>；

我想将

与右侧浮动的

标记对齐

虽然我可以使用

text align

使

向右移动，但

的开头和

标记之间存在间隙

我还可以在

标记中添加

右边距
，但我发现这不是很有反应性

这就是我的意思：


这是我的代码：


。对{
浮动：对；
}
.对h2{
文本对齐：右对齐；
}
.右img{
浮动：左；
宽度：100px；
高度：120px；
}

标题2.1
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

默认情况下，
h2
是a，这意味着它将从容器中获取所有可用的水平空间。因此，使用
text align:right
只会在其中移动文本，但会占用相同的空间，如您在此处所见：


。对{
浮动：对；
}
.对h2{
背景：青色；
文本对齐：右对齐；
}
.右img{
背景：红色；
浮动：左；
宽度：100px；
高度：120px；
}

标题2.1
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失

将图像放在标题之前，并将标题向左对齐。不确定这是否真的是您想要的，但请检查以下JSFIDLE：


HTML


。对{
浮动：对；
}
.对h2{
文本对齐：左对齐；
}
.右img{
浮动：左；
}

标题2.1
Lorem ipsum dolor sit amet，是一位杰出的献身者

为了使文本对齐有效，必须为内容和
元素放置一个宽度

HTML


div.right{
宽度：50%；
/*范例*/
}
右分区{
浮动：对；
}
右二部{
宽度：100%；
/*范例*/
文本对齐：右对齐；
}
右舱{
浮动：左；
}

标题2.1
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

我们有进展了！这个解决方案是我迄今为止所尝试过的所有方法中效果最好的。然而，有一点是不需要的：图像从h2的顶部开始。这就是为什么我把h2作为一个块，所以图像会在h2下面。但也许有不同的方法来处理这个问题。有什么建议吗？@HeadGam3z您应该将
h2
元素的
margin top
设置为
0
，或者在所有元素中：
h2{margin top:0；}
设置为第一个。假设
h2
始终是
.block
元素中的第一个元素：
.block>h2:first child{margin top:0；}
有人解决了您的问题吗？如果是这样，请您接受最佳答案（单击分数下的复选标记）。这将帮助其他遇到您问题的用户快速找到公认的答案，并给作者15分（：