DIV avec Image et Texte

Je veux créer un DIV avec un en-tête de hauteur 6px et à l'intérieur du corps div, je veux aligner une image et du texte l'un à côté de l'autre. La hauteur du corps DIV devrait être fixée.DIV avec Image et Texte

Source

2009-03-31 KJai

Voici un exemple très simple de la façon de faire ce que vous voulez (en utilisant les styles en ligne):

<div> 
    <div style="height:6px;width:500px;background-color:#3399CC;"></div> 
    <div style="clear:both"/> 
    <div style="float:left"><img src="http://www.google.com/intl/en_ALL/images/logo.gif"/></div> 
    <div style="float:left">Your Text Here</div> 
</div> 
<div style="clear:both"/>

Vous pouvez tester ce code et essayez de la modifier en temps réel ici: http://htmledit.squarefree.com/.

Source

2009-03-31 04:38:58 Gdeglin

Ceci ne fonctionne pas lorsque le texte est plus long que la vue; il flotte ensuite à la ligne suivante. – Joost

Essayez de créer une page html avec le code suivant:

<html> 
<head> 
<style type="text/css"> 
body { 
text-align: center; 
} 
#container { 
    margin-right: auto; 
    margin-left: auto; 
    width: 200px; 
    height: 200px; 
    background: #acf; 
} 
#header { 
    background: #f98; 
    padding-bottom: 1px; 
} 
#container img { 
    background: #000; 
    float: left; 
    padding: 10px; 
    margin: 10px; 
} 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 
      <h1>Heading</h1> 
     </div> 
     <img src="image.jpg" alt="" height="25" width="25" /> 
     <p>Text text text</p> 
    </div> 
</body> 
</html>

Source

2009-03-31 08:08:30

Construire sur Jon. Un en-tête de 6px est puissant!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Div layout</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
#container { 
    margin:0 auto; 
    width:400px; 
    height:300px; 
    overflow:scroll; 
    background:#acf; 
    padding:0; 
} 
#container h1 { 
    background:#f98; 
    padding:0 0 1px 0; 
    height:6px; 
    font-size:2px; 
    text-align:center; 
    font-weight:normal; 
    border:3px #FFA500 outset; 
} 
#container img { 
    background:#000; 
    float:left; 
    padding:10px; 
    margin:10px; 
} 
/*]]>*/ 
</style> 
</head> 

<body> 
<div id="container"> 
    <h1>Heading</h1><img src="image.jpg" alt="" height="25" width="25" /> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed 
    eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et 
    ultrices posuere cubilia Curae; Nulla sit amet tellus vel augue 
    hendrerit pellentesque. Aenean cursus, quam nec volutpat interdum, nibh 
    sapien elementum mi, id accumsan neque risus a est. Praesent libero 
    metus, tincidunt at, vulputate eu, vehicula at, arcu? Donec orci metus, 
    ornare non, viverra vel, vehicula ac, dui. Aliquam erat volutpat. Fusce 
    malesuada urna quis augue. Mauris in purus. Maecenas at est. Nunc 
    vestibulum feugiat justo. Etiam nec urna. Nulla facilisi. Ut enim. 
    Nullam sit amet mauris eu quam eleifend vestibulum! Cras lectus turpis, 
    cursus nec, fermentum egestas, fermentum non, tortor.</p> 
</div> 
</body> 
</html>

Source

2009-04-01 18:28:11 BryanH

DIV avec Image et Texte

Répondre

Questions connexes