[英]How to have image and text side by side
我試圖將[如圖所示],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
你的h4有一些瘋狂的余量,所以刪除它
h4 {
margin:0px;
}
編輯:
對於0分鍾文本,添加了一個浮動到第一個div,但我個人只是將它們組合起來,盡管你可能有理由不這樣做。
你已經正確地做了,只是<h4>Facebook</h4>
標簽占用了太多的垂直邊距。 您可以使用<h4>
標記上的樣式margin:0px
刪除它。
為了您將來的方便,您可以在元素上放置邊框( border:1px solid black
),以查看哪些部分實際上是錯誤的。
使用以下代碼: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;}
將元素分組到相關的部分總是值得的。 在您的情況下,父元素包含兩列;
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;
}
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.