如何使图片和文本并排显示

Question

我试图让“如图所示”文字与Facebook图标和文本并排显示，但我无法清楚地实现。

我的尝试代码

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>

我的JSFiddle

- Lonely

Answer 1

你的h4元素有一些奇怪的外边距，所以请将其删除。

h4 {
    margin:0px;
}

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

编辑：

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

对于0分钟文本，将第一个div添加了float left属性，但我个人建议将它们合并，但你可能有不同的原因。

- SubjectCurio

---

"0 分钟前" 的文本已经下降，请再次检查。 - Lonely

由于div设置为向右浮动，请查看http://jsfiddle.net/Vinay199129/s3Qye/。 - Vinay Pratap Singh Bhadauria

@Lonely已经为此添加了修复，但将两个div合并，并在其中包含分钟的span可能是一个更好的想法。这取决于您想要做什么。 - SubjectCurio

实际上，样式设置非常错误，仅为h4设置边距并不能解决问题，因为他有未清除的浮动，导致父元素无法扩展，此外，他需要重新构建HTML。我不知道用户是否直接进入了fiddle，但这里的CSS完全错误。 - Mr. Alien

"px" 是多余的。应该改为：margin:0; - ntrch

Answer 2

你已经做得很正确了，只是 <h4>Facebook</h4> 标签占用了太多的垂直间距。您可以在 <h4> 标签上使用样式 margin:0px 来删除它。

为了您未来的方便，您可以在元素上添加边框 (border:1px solid black)，以查看您实际上哪里出错了。

- justhalf

---

谢谢你提供边界的提示。 - asgs

Answer 3

将相关元素分组到一个部分中总是值得的。 在您的情况下，父元素包含两列;

1. 图标
2. 文本.

http://jsfiddle.net/qMdfC/10/

HTML:

<div class='container2'>
    <img src='http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png' class='iconDetails' />

    <div class="text">
        <h4>Facebook</h4>
        <p>
            fine location, GPS, coarse location
            <span>0 mins ago</span>
        </p>
    </div>
</div>

CSS：

* {
    padding:0;
    margin:0;
}
.iconDetails {
    margin:0 2%;
    float:left;
    height:40px;
    width:40px;
}
.container2 {
    width:100%;
    height:auto;
    padding:1%;
}
.text {
    float:left;
}
.text h4, .text p {
    width:100%;
    float:left;
    font-size:0.6em;
}
.text p span {
    color:#666;
}

- seemly

Answer 4

使用以下代码：jsfiddle.net/KqHEC/

HTML

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

CSS

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

.container2 {
    width:270px;
    height:auto;
    padding:1%;
    float:left;
}
h4{margin:0}
.left {float:left;width:45px;}
.right {float:left;margin:0 0 0 5px;width:215px;}

http://jsfiddle.net/KqHEC/1/

- Divya Bhaloidiya

Answer 5

移除 h4 标签的边距。

h4 {
margin:0px;
}

Fiddle链接

http://jsfiddle.net/Vinay199129/s3Qye/

- Vinay Pratap Singh Bhadauria

Answer 6

HTML

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

CSS

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

.containerBox {
width:300px;
height:60px;
padding:1px;
background-color:#303030;
}
h4{
margin:0px;
margin-top:3%;
margin-left:50px;
color:white;
}

- IRONMAN