Cách để hình ảnh và văn bản cạnh nhau

Question

Tôi đang cố gắng có biểu tượng và biểu tượng facebook như được hiển thị trong hình ảnh. Tôi không thể hiểu rõ điều đó.

tôi đã thử mã

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

Answer 1

h4 của bạn có một số CRA ZY lề trên nó, vì vậy loại bỏ nó

h4 { 
    margin:0px; 
} 

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

chỉnh sửa:

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

cho các văn bản 0 phút, thêm một phao trái sang div đầu tiên, nhưng cá nhân i' d chỉ kết hợp chúng, mặc dù bạn có thể có lý do để không.

Answer 2

Bạn đã làm đúng cách, chỉ cần thẻ <h4>Facebook</h4> đang lấy quá nhiều tỷ lệ ký quỹ dọc. Bạn có thể xóa bằng cách sử dụng kiểu margin:0px trên thẻ <h4>.

Để thuận tiện cho tương lai, bạn có thể đặt đường viền (border:1px solid black) trên các phần tử để xem phần nào bạn thực sự hiểu sai.

Answer 3

loại bỏ các lề cho thẻ h4

h4 { 
margin:0px; 
} 

Fiddle liên kết

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

Answer 4

Nó luôn luôn giá trị nhóm yếu tố thành phần có liên quan. Trong trường hợp của bạn, một phần tử cha có chứa hai cột;

1. biểu tượng
2. văn bản.

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; 
} 

Answer 5

Sử dụng đoạn mã sau: 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/

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; 
}