文本漂浮在图像旁边的块中

Question

我想实现以下位置：

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

我一直在尝试不同的显示设置（块 + 内联文本等），但它仍然无法正常工作。

HTML:

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

CSS：

 .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;
}

原文由 John 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

 .content {
    width: 400px;
    border: 4px solid red;
    padding: 20px;
    overflow: hidden;
}

.content img {
    margin-right: 15px;
    float: left;
}

.content h3,
.content p{
    margin-left: 15px;
    display: block;
    margin: 2px 0 0 0;
}

 <div class="content">
    <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ alt="" >
    <h3>Title</h3>
    <p>Some Description</p>
</div>​

原文由 Ahsan Khurshid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

嗨，为什么以前向左浮动你可以在不使用的情况下做到这一点 float 就像这样

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

CSS

     .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;
}

并根据您的设计更改为 css、class

原文由 Rohit Azad Malik 发布，翻译遵循 CC BY-SA 4.0 许可协议