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

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

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

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

<强> Live demo

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

Answer 3

你可以尝试使用表的经典方式，虽然不建议使用表格进行布局

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

Answer 4

试试这个.....应该有效

HTML：

<div id="testDiv">
    <div class="imgContainer"><img src="path/image.jpg" /></div>
    <div class="textContainer"></div>
</div>

的CSS：

#testDiv { float:left; width: 360px; }
#testDiv .imgContainer { float:left; width:120px; height:90px; }
#testDiv .textContainer { float:left; width:240px; height:90px; overflow:hidden }

Answer 5

我认为您需要以下内容：

HTML：

<div class="wrap">
  <img src="img.jpg" class='left;' />
  <h1 class='right'>TITLE</h1>
  <div class='right'>Element description</div>
</div>

CSS：

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

这应该可以解决问题。 根据您的需要调整宽度和边距参数。