Html 如何将图像和文本并排放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18567708/
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
How to have image and text side by side
提问by Lonely
I'm trying to have the [as shown in picture] , facebook icon and text side by side. I cannot able to get that clearly.
我正在尝试将 [如图所示]、facebook 图标和文本并排显示。我无法清楚地了解这一点。
My tried code
我试过的代码
CSS
CSS
.iconDetails {
margin-left:2%;
float:left;
height:40px;
width:40px;
}
.container2 {
width:100%;
height:auto;
padding:1%;
}
HTML
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
我的JSFiddle
回答by MLeFevre
Your h4 has some crazy margin on it, so remove it
你的 h4 上有一些疯狂的余量，所以删除它
h4 {
margin:0px;
}
edit:
编辑：
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.
对于 0 分钟文本，在第一个 div 左侧添加了一个浮点数，但我个人只是将它们组合起来，尽管您可能有理由不这样做。
回答by justhalf
You're already doing it correctly, it just that the <h4>Facebook</h4>tag is taking too much vertical margin. You can remove it by using the style margin:0pxon the <h4>tag.
您已经做对了，只是<h4>Facebook</h4>标签占用了太多的垂直边距。您可以使用标签margin:0px上的样式将其删除<h4>。
For your future convenience, you can put border (border:1px solid black) on your elements to see which part you actually get it wrong.
为了您以后的方便，您可以border:1px solid black在元素上放置边框 ( ) 以查看您实际上弄错了哪个部分。
回答by Rigel Networks
Use following code : jsfiddle.net/KqHEC/
使用以下代码：jsfiddle.net/KqHEC/
HTML
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
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;}
回答by Vinay Pratap Singh
remove the margin for the h4 tag
删除 h4 标签的边距
h4 {
margin:0px;
}
Fiddle link
小提琴链接
回答by seemly
It's always worth grouping elements into sections that are relevant. In your case, a parent element that contains two columns;
将元素分组到相关的部分总是值得的。在您的情况下，包含两列的父元素；
- icon
- text.
- 图标
- 文本。
HTML:
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:
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;
}
回答by IRONMAN
HTML
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
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;
}
