图像旁边的多行文本（CSS-HTML）
我试着在图像旁边放两行文字，有点像这样图像旁边的多行文本（CSS-HTML）,html,css,image,alignment,Html,Css,Image,Alignment,我试着在图像旁边放两行文字，有点像这样 _________ ||文本的第一行 |形象| ||文本第二行 --------- 这是我目前掌握的代码 <p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span> <br> <span class="ban2">Line 2 of text<
_________
||文本的第一行
|形象|
||文本第二行
---------
<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span></p>
_________
||文本的第一行
|形象|
| |
---------
正文第二行
我已经浏览了所有的网页，但还没有弄清楚如何做到这一点，欢迎提供任何帮助。没有
float:center左右无如果您希望它居中，那么您必须将图像和文本包装在一个容器中，固定容器的宽度并执行
margin:0 auto，然后继续使您的图像浮动--除非它将受到包装器的约束。检查它。它是定义良好的css
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
img, span {
float:left;
}
.banner img {
float: center;
margin: 5px;
}
[class="ban1"]{
font-size: 17px;
position:relative;
top:50px;
left:11px;
}
[class="ban2"] {
font-size: 17px;
position: relative;
left: -97px;
top: 74px;
}
</style>
</head>
<body>
<div class="banner">
<div class="wrapper">
<p><img src="span.png"><span class="ban1">Line one of text</span>
<span class="ban2">Line 2 of text</span>
</p>
</div>
</div>
</body>
</html>
选择器
.banner p{
字体系列：“Gentium Basic”；
字号：19px；
文本对齐：居中；
颜色：#aaa；
利润率最高：-10；
显示：块；
}
img，span{
浮动：左；
}
.banner img{
浮动：中心；
保证金：5px；
}
[class=“ban1”]{
字号：17px；
位置：相对位置；
顶部：50px；
左：11px；
}
[class=“ban2”]{
字号：17px；
位置：相对位置；
左：-97px；
顶部：74px；
}
文本的第一行
正文第2行
我知道这篇文章很旧，但将你的元素包装成一个div
并将垂直对齐：top
应用于这个div
，你就完成了 这里有一个使用svg的代码片段，您可以在任何地方对其进行测试
.img{
浮动：左；
右边距：1rem；
}
第1行
第2行
我知道这是一篇老文章，但我还是想说，不仅仅是float
可以做到这一点，文本的行
正文第2行
小提琴：这是我的演示，演示了如何使用float
和overflow
，并做了一些解释
.div1{
边框：3px实心#0f0；
溢出：auto；//此处没有溢出，如果“第1行”和“第2行”较短，则“下一个元素”将显示在“第2行”下方，图像将覆盖“下一个元素”
}
.img{
浮动：左；
宽度：100px；
高度：100px；
背景：#000
}
.第2分部{
float:left；//此处不带float，如果“第1行”和“第2行”较长->文本将同时显示在图像的右侧和底部
}
第1行
第2行
下一个元素
我建议使用效果很好的旧表。就CSS而言，只需要添加垂直对齐：top
属性
<p>
<img src="smiley.gif" align="left"><span>Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span>
</p>
这是一个非常长的文本，创建了多行，图像在左侧
Fiddle：我正在尝试将图像和文本置于横幅的中心，如果我使其向左浮动，则它会一直向左移动，而不允许我使其居中。如果要使其居中，则必须将图像和文本包装在一个容器中，固定容器的宽度并执行边距：0自动<table>
<tbody>
<tr>
<td class="img-container">
<img src="https://img2.gratispng.com/20180324/sbe/kisspng-google-logo-g-suite-google-5ab6f1f0dbc9b7.1299911115219389289003.jpg"/>
</td>
<td class="content-container">
<span class="description">This is a very long text that creates multiple lines with the image at left side</span>
</td>
</tr>
</tbody>
</table>