Come avere immagini e lato del testo a fianco

Question

Sto cercando di avere la [come mostrato nella foto], icona di facebook e sul lato di testo a fianco. Non riesco a capirlo chiaramente.

mio cercato codice

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> 

mio JSFiddle

Answer 1

tuo h4 ha qualche cra margine zy su di esso, in modo da rimuoverlo

h4 { 
    margin:0px; 
} 

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

edit:

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

per il testo 0 minuti, ha aggiunto un galleggiante a sinistra per il primo div, ma personalmente' d li unisci, anche se potresti avere dei motivi per non farlo.

Answer 2

Lo stai già facendo correttamente, solo che il tag <h4>Facebook</h4> sta prendendo troppo margine verticale. Puoi rimuoverlo usando lo stile margin:0px sul tag <h4>.

Per la vostra comodità futura, è possibile inserire il bordo (border:1px solid black) sui propri elementi per vedere quale parte in realtà si sbaglia.

Answer 3

rimuovere il margine per il tag h4

h4 { 
margin:0px; 
} 

collegamento Fiddle

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

Answer 4

Vale sempre la pena elementi in sezioni che sono rilevanti raggruppamento. Nel tuo caso, un elemento genitore che contiene due colonne;

1. icona
2. testo.

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

Uso seguente codice: 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; 
}