Comment avoir l'image et le texte côte à côte

Comment avoir l'image et le texte côte à côte

J'essaie d'avoir la [figure] , facebook icône et texte côte à côte. Je ne peux pas en mesure d'obtenir clairement.

Mon essayé le code

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>

Mon JSFiddle

source d'informationauteur Lonely

  1. 14

    Votre h4 a quelques fous de la marge sur elle, afin de la supprimer

    h4 {
    margin:0px;
}

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

    edit:

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

    pour le 0 minutes de texte, ajout d'un float à gauche de la première div, mais personnellement, je venais tout juste de les combiner entre eux, même si vous avez des raisons de ne pas.

  2. 3

    Vous êtes déjà à le faire correctement, c'est juste que le <h4>Facebook</h4> balise est de prendre trop de marge verticale. Vous pouvez le supprimer en utilisant le style margin:0px sur le <h4> tag.

    Pour votre avenir de commodité, vous pouvez mettre de la frontière (border:1px solid black) sur vos éléments pour voir quelle partie vous faire de mal.

  3. 2

    Utilisez le code suivant : 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/

  4. 1

    supprimer de la marge pour la balise h4

    h4 {
    margin:0px;
}

    Violon lien

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

  5. 0

    Il est toujours utile de regrouper des éléments dans les sections qui sont pertinentes.
    Dans votre cas, un parent de l'élément qui contient deux colonnes;

    1. icône
    2. texte.

    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;
}
  6. 0

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