Comment Float-Gauche et Flot-Droit en HTML CSS

-1

Je suis un apprenant de CSS et HTML et j'ai une tâche de créer un fichier avec HTML et CSS en utilisant Float-Left et Float-Right.Comment Float-Gauche et Flot-Droit en HTML CSS

Voici une image que je veux créer

Je l'ai fait tout en utilisant HTML et CSS, mais je ne ai pas afficher des images comme ci-dessus montre

est ici la sortie de mon code

Et voici mon CSS CODE

body{ 
    background-color:#666; 

    font-family:"Comic Sans MS", cursive; 
} 

    h1{ 
     color:#FFF; 
    } 
#color{ 
    border:dotted 2px #F90; 
    background-color:black; 
    width:670px; 
    margin:0 auto; 
    alignment-adjust:central; 

} 

.float-left{ 
    display:block; 
    background-color:white; 
    margin:20px 50px 20px px; 
    padding:20px; 
    float:none; 
} 
.white{ 
background-color:white; 
    border:solid 1px red; 
    margin:15px 40px 15px 40px; 
    padding:2px; 
    font-style:italic; 
} 
.purple{ 
    background-color:white; 
    border:solid 1px red; 
    margin:15px 40px 15px 40px; 
    padding:2px; 
    font-style:italic; 

}

et voici Code HTML

<body> 

    <!--<div class="background">--> 
    <div id="color"> 
    <div id="float-left"> 
    <h1>Float Left</h1> 
    <div class="white"> 

     <div class="float-left"><img class="" src="https://i.ytimg.com/vi/EQ_mYstNGwg/maxresdefault.jpg" width="93" height="77" alt="img" /> 
     </div> 
     <p> thiojds jeifwk mskodiw dmkmx wmsoak.dwsqksmi wnsmakxn,dwenddjewjn,wksmdwdwm,dwkkmsakwi,iwdjwkiw.dwjidjwwij 
     .wijdksxkmddos. 
     sdsjkjie nennnwj snjdnwinda wqndjf sdnjiajanx jssnxjnxsnxs asnjxsnxssjxnss asdnjxnn nsjndcd dkmcdkdi ewin wjdke jndiisn dweidns iwqjss wiji pqw9sm.sdjdwqi eewiow oqskawiqo djaskd,ssssssssssssssswi isssssssseiw kdkddjmsqo ejfnjf fndjfow wkm.dmewomdiwq oqwsk widsie oqwsqkiwj ksiw assjjdi wqijdi wiqojid wddid wkdi qoiasjkdj asjidjs iojdskdkso odjosij</p> 

     </div> 
     </div> 
     <div class="float-right"> 
    <h1> Float Right</h1> 
    <div class="purple"> 
     <div class=""><img class="" src="https://i.ytimg.com/vi/EQ_mYstNGwg/maxresdefault.jpg" width="88" height="76" alt="img" /> 
     </div> 
      <p> thiojds jeifwk mskodiw dmkmx wmsoak.dwsqksmi wnsmakxn,dwenddjewjn,wksmdwdwm,dwkkmsakwi,iwdjwkiw.dwjidjwwij 
      .wijdksxkmddos 
      .sdsjkjie nennnwj snjdnwinda wqndjf sdnjiajanx jssnxjnxsnxs asnjxsnxssjxnss asdnjxnn nsjndcd dkmcdkdi ewin wjdke jndiisn dweidns iwqjss wiji pqw9sm.sdjdwqi eewiow oqskawiqo djaskd,ssssssssssssssswi isssssssseiw kdkddjmsqo ejfnjf fndjfow wkm.dmewomdiwq oqwsk widsie oqwsqkiwj ksiw assjjdi wqijdi wiqojid wddid wkdi qoiasjkdj asjidjs iojdskdkso odjosij</p> 
    </div> 
      </div> 
      </div> 


</body>

et voici JsFiddle

Source

2017-03-08 sunny

Utilisez ceci:

.post-container { 
 
    margin: 20px 20px 0 0; 
 
    border: 5px solid #333; 
 
    overflow: auto 
 
} 
 
.post-thumb { 
 
    float: left 
 
} 
 
.post-thumb img { 
 
    display: block 
 
} 
 
.post-title { 
 
    font-weight: bold; 
 
    font-size: 200% 
 
}

<div class="post-container">     
 
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div> 
 
    <div class="post-content"> 
 
     <h3 class="post-title">Post title</h3> 
 
     <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post descdesc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post descdesc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post descdesc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post descdesc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p></div> 
 
</div>

Source

2017-03-08 06:29:01

Merci ensoleillé :) –

Merci beaucoup – sunny

Bienvenue Ensoleillé !! :) –

.float-left{ 
    display:block; 
    background-color:white; 
    margin:20px 50px 20px px; 
    padding:20px; 
    float:none; 
}

Pour flotter à gauche, vous devez donner float la valeur left et non none. Pour flotter à droite, vous devez écrire des règles pour votre classe float-right.

Source

2017-03-08 06:20:59 Quentin

Merci de votre aide. Pouvez-vous s'il vous plaît modifier mon violon pour moi? – sunny

que vous mettez la propriété css float: left sur l'image que vous voulez mettre sur la gauche et la propriété float: right sur l'image que vous voulez mettre à droite .

Et quelques suggestions, mon pote. Pas besoin de placer votre <img> à l'intérieur d'un <div> et avec cela, vous pouvez mettre les propriétés floatsur l'élément img lui-même, pas sur son div parent (car il pourrait ruiner la mise en page).

Source

2017-03-08 06:54:33 Yoan

Comment Float-Gauche et Flot-Droit en HTML CSS

Répondre

Questions connexes