文本在图像旁边的块中浮动 [英] Text floating in block next to image

问题描述

我想实现以下布局：

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

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

HTML：

 < div class =res> 
< img src =<？php echo'img /'.$ row [sType]。'。png';？>/> 
< span> TITLEe< / span> 
< span>说明< / span> 
< / div> 
  

CSS：

  .res {
 
 height：60px; 
 background-color：yellow; 
 border-bottom：1px纯黑色; 
 text-align：left; 
 
} 
 
 .res img {
 
 margin-top：8.5px; 
 margin-left：5px; 
 display：inline 
} 
 
 .res span {
 
 display：block; 
 
  

解决方案

HTML：

 < div class =content> 
< img src =http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png/ alt => 
< h3>标题< / h3> 
< p>一些说明< / p> 
< / div> 
  

CSS： p>

  .content {
 width：400px; 
 border：4px纯红色; 
 padding：20px; 
 overflow：hidden; 
} 
 
 .content img {
 margin-right：15px; 
 float：left; 
} 
  

I would like to achieve the following placement:

Two different texts (in block) floating / inline next to image. (Everything inside div).

I have been trying with different display settings (block + inline for text etc.) but it is still not working.

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

解决方案

HTML:

<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>​

CSS:

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

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

这篇关于文本在图像旁边的块中浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！