Html 文本浮动在图像旁边的块中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11845412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text floating in block next to image
提问by John
I would like to achieve the following placement:
我想实现以下位置：
Two different texts (in block) floating / inline next to image. (Everything inside div).
两个不同的文本（块中）在图像旁边浮动/内联。（div 内的所有内容）。
I have been trying with different display settings (block + inline for text etc.) but it is still not working.
我一直在尝试使用不同的显示设置（文本块 + 内联等），但它仍然无法正常工作。
HTML:
HTML：
<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<span>TITLEe</span>
<span>Description</span>
</div>
CSS:
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;
}
回答by Ahsan Khurshid
.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>?回答by Rohit Azad
Hi why used to float left you can do this without used floatas like this
嗨，为什么习惯向左浮动，你可以这样做而float不像这样使用
<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<div class="text"><h5>TITLEe</h5>
<p>Description</p></div>
</div>
Css
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;
}
and change to css, class according to your design
并更改为 css，根据您的设计进行分类
回答by Neji
well you can try the classic way using tables although it is not recommended to use tables for layout
好吧，您可以尝试使用表格的经典方式，尽管不建议使用表格进行布局
<table>
<tr>
<th><img src="yourimage" /> </th>
<th >adsasd<br/>adas</th>
</tr>
</table>
回答by epi.clyce
try this.....should work
试试这个.....应该工作
html:
html：
<div id="testDiv">
<div class="imgContainer"><img src="path/image.jpg" /></div>
<div class="textContainer"></div>
</div>
css:
css：
#testDiv { float:left; width: 360px; }
#testDiv .imgContainer { float:left; width:120px; height:90px; }
#testDiv .textContainer { float:left; width:240px; height:90px; overflow:hidden }
回答by DerWaldschrat
I think you need the following:
我认为您需要以下内容：
HTML:
HTML：
<div class="wrap">
<img src="img.jpg" class='left;' />
<h1 class='right'>TITLE</h1>
<div class='right'>Element description</div>
</div>
CSS:
CSS：
.wrap { width: 600px; /* Just a sample value */ }
.left { width: 200px; float: left; }
.right { margin-left: 220px; width: 380px;}
That should do the trick. Adjust width and margin params to your needs.
这应该够了吧。根据您的需要调整宽度和边距参数。
