文本漂浮在旁边的图像

块我想实现以下位置：下一个图像文本漂浮在旁边的图像

两个不同的文本（块）浮动/直列。（div中的所有内容）。

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

enter image description here

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

来源

2012-08-07 John

什么如果'元素描述'文本超出了th，就会发生图像元素的底部？ – 2012-08-07 11:56:40

你试过了什么？在这里分享你的代码。 – 2012-08-07 11:56:58

请添加您的HTML。 – Narendra 2012-08-07 11:58:43

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

来源

2012-08-07 12:04:27

Thnak你，它的工作原理就像我想:) – John 2012-08-07 12:07:36

不客气。如果你认为这是根据你的要求，那么不要忘记接受它;-) – 2012-08-07 12:08:53

超级有用，超级简单。我的弱智大脑一直想把*文本*留下来，而不是图像。这个简单的例子是一个额头 - sla子手！ *当然*图像应该接收浮点数，而不是文本！谢谢你的优雅回应。 – 2015-07-15 22:24:26

试试这个.....应该工作

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 }

来源

2012-08-07 12:00:20

Your code'not shown as I answers，so I did not not in your way ... – 2012-08-07 12:02:17

没问题，它工作完美:) – John 2012-08-07 12:05:45

我认为你需要以下条件：

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

这应该做的伎俩。根据您的需要调整宽度和边距参数。

来源

2012-08-07 12:01:28 DerWaldschrat

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

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

来源

2012-08-07 12:04:12 Neji

我想实现它，而不使用表，谢谢反正:) – John 2012-08-07 12:06:33

请不要使用表格风格。 – Dementic 2015-11-03 15:50:45

嗨为什么用于fl燕麦根据你的设计左边你可以做到这一点，而不使用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，类

来源

2012-08-07 12:10:11

文本漂浮在旁边的图像

回答

相关问题