Html 文本浮动在图像旁边的块中

我希望获得以下职位：

两个不同的文本（在块中）浮动/内联在图像旁边。（div内的所有内容）

我一直在尝试不同的显示设置（块+内联文本等），但它仍然不起作用

HTML:

<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<span>TITLEe</span>
<span>Description</span>
</div>  

.res {

    height:60px;
    background-color:yellow;
    border-bottom:1px solid black;
    text-align:left;

}

.res img {

    margin-top:8.5px;
    margin-left:5px;
    display:inline
}

.res span {

    display:block;
}

---

试试这个……应该有用

html:

---

我认为你需要以下几点：

HTML:

这应该能奏效。

---

根据您的需要调整宽度和边距参数。

您可以尝试使用表格的经典方法，尽管不建议使用表格进行布局

<table>
  <tr>
    <th><img src="yourimage" /> </th>
    <th >adsasd<br/>adas</th>
  </tr>
</table>

adsasd
adas

.content{
宽度：400px；
边框：4倍纯红；
填充：20px；
溢出：隐藏；
}
.内容img{
右边距：15px；
浮动：左；
}
.内容h3，
.内容p{
左边距：15px；
显示：块；
保证金：2px0；
}

标题
一些描述

​嗨，为什么习惯于向左浮动？您可以这样做，而不必像这样使用
float

<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<div class="text"><h5>TITLEe</h5>
  <p>Description</p></div>
</div>  

更改为css，根据您的设计分类
如果
元素描述
文本超出图像元素的底部，会发生什么情况？非常有用，非常简单。我虚弱的大脑一直想把文字移到左边，而不是图像。这个简单的例子就是拍额头！当然，图像应该接收浮点，而不是文本！谢谢您优雅的回复。请不要使用表格来设计样式。
<div class="wrap">
  <img src="img.jpg" class='left;' />
  <h1 class='right'>TITLE</h1>
  <div class='right'>Element description</div>
</div>

.wrap { width: 600px; /* Just a sample value */ }
.left { width: 200px; float: left; }
.right { margin-left: 220px; width: 380px;}

<table>
  <tr>
    <th><img src="yourimage" /> </th>
    <th >adsasd<br/>adas</th>
  </tr>
</table>

<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<div class="text"><h5>TITLEe</h5>
  <p>Description</p></div>
</div>  

    .res {
    height:60px;
    background-color:yellow;
    border-bottom:1px solid black;
}
img, .text{
vertical-align:top;
}
.text{
display:inline-block;
}
p, h5{
margin:0;
  padding:0;
}