如何让图像和文字并排 [英] How to have image and text side by side

问题描述

'I' m试图让[如图所示]，脸谱图标和文字并排。我无法清楚地知道。

我试过的代码

CSS

  .iconDetails {
 margin-left：2％; 
 float：left; 
 height：40px; 
 width：40px; 
} 
 
 .container2 {
 width：100％; 
 height：auto; 
填充：1％; 
} 
  

HTML $ b

 < div class ='container2'> 
< div> 
< img src ='http：//ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png'class ='iconDetails'> 
< / div> 
< div style ='margin-left：60px;'> 
< h4> Facebook< / h4> 
< div style =font-size：.6em>精确位置，GPS，粗略位置< / div> 
< div style =float：right; font-size：.6em> 0分钟前< / div> 
< / div> 
< / div> 
  

我的 JSFiddle

解决方案

你的h4有一些疯狂的保证金，所以删除它

  h4 {
 margin：0px; 
} 
  

http://jsfiddle.net/qMdfC/2/

编辑：

http://jsfiddle.net/qMdfC/6/

为0分钟的文本，添加了一个浮动左边的第一个div，但个人我只是将它们合并，尽管你可能有理由不这样做。

I'm trying to have the [as shown in picture] , facebook icon and text side by side. I cannot able to get that clearly.

My tried code

CSS

 .iconDetails {
 margin-left:2%;
float:left; 
height:40px;
width:40px; 
} 

.container2 {
    width:100%;
    height:auto;
    padding:1%;
}

HTML

<div class='container2'>
        <div>
            <img src='http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png' class='iconDetails'>
        </div>  
    <div style='margin-left:60px;'>
    <h4>Facebook</h4>
    <div style="font-size:.6em">fine location, GPS, coarse location</div>
    <div style="float:right;font-size:.6em">0 mins ago</div>
    </div>
</div>

My JSFiddle

解决方案

Your h4 has some crazy margin on it, so remove it

h4 {
    margin:0px;
}

http://jsfiddle.net/qMdfC/2/

edit:

http://jsfiddle.net/qMdfC/6/

for the 0 minutes text, added a float left to the first div, but personally i'd just combine them, although you may have reasons not to.

这篇关于如何让图像和文字并排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！