Envelopper une div d'une ligne autour d'un img (pas de texte)

J'essaie d'obtenir un tas de div pour entourer une image, mais j'échoue.Envelopper une div d'une ligne autour d'un img (pas de texte)

Comme le collage de HTML ne semble pas fonctionner dans StackOverFlow, voici ma tentative actuelle d'émulation d'une entrée de contact Outlook 2010.

Source de: http://www.perfmon.com/download/contactdivtest.htm (edit: ou consultez @ fraîche éditeur en ligne Hristo)

<html> 
<head> 
<title> 
</title> 
<style type="text/css"> 
.contactLarge{ 
    width: 250px; 
    height: 220px; 
} 
img.picture { 
    margin-left: 0px; 
    margin-bottom: 0px; 
    float: left; 
} 
.contactLarge item{ 
} 
</style> 
</head> 
<body> 
<div class="contactLarge"> 
<div style="background-color:#C5CED8;clear:both">title </div> 
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt=""> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div> 
<div style="font-weight:bold;clear:both;" >CompanyName</div> 
<div >Title</div> 
<div >Work#</div> 
<div >Mobile#</div> 
<div >Home</div> 
<div >email1</div> 
<div >email2</div> 
<div >email3</div> 
<div >Street</div> 
<div style="background-color:#F1F5F9; float:left;" >City,</div> 
<div style="background-color:#F1F5F9; float:left;" >State</div> 
<div style="background-color:#F1F5F9;" >Zip</div> 
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div> 
<div style="background-color:#F1F5F9; ">im</div> 
</div> 
</body> 
</html>

Quelqu'un peut-il me dire ce que je dois faire pour toutes les div Remontons et enroulez autour de l'image? J'espère vraiment que je ne manque pas quelque chose de simple ...

Voici la mise en page cible que je tente:

alt text http://perfmon.com/download/contactdivtest.bmp

Source

2010-08-05 LamonteCristo

Consultez http://stackoverflow.com/editing-help pour obtenir de l'aide sur la mise en question de code. –

Pourriez-vous poster une image de ce que vous essayez d'accomplir? Je ne peux pas tout dire à partir du HTML et n'utilisez pas Outlook 2010. – DHuntrods

essayez d'utiliser span au lieu de div pour votre solution spécifique – KoolKabin

Foor la durée de votre solution spécifique peut fonctionner mieux pour vous:

vérifier la version avec envergure:

<html> 
<head> 
<title> 
</title> 
<style type="text/css"> 
.contactLarge{ 
    width: 250px; 
    height: 220px; 
} 
.contactLarge span{ 
    font-weight: bold; 
} 
img.picture { 
    margin-left: 0px; 
    margin-bottom: 0px; 
    float: left; 
} 
.contactLarge item{ 
} 
</style> 
</head> 
<body> 
<div class="contactLarge"> 
<div style="background-color:#C5CED8;clear:both">title </div> 
<img class="picture" width="100" height="200" src="http://www.perfmon.com/download/ContactBigLeftBorder.png" alt=""> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
First, Last <br> 
<span>LastName, Firstname</span> <br /> 
<span>CompanyName</span> <br /> 
<span >Title</span> <br> 
<span >Work#</span> <br> 
<span >Mobile#</span> <br> 
<span >Home</span> <br> 
<span >email1</span> <br> 
<span >email2</span> <br> 
<span >email3</span> <br> 
<span >Street</span> <br> 
<span style="background-color:#F1F5F9; float:left;" >City,</span> <br> 
<span style="background-color:#F1F5F9; float:left;" >State</span> <br> 
<span style="background-color:#F1F5F9;" >Zip</span> <br> 
<span style="background-color:#F1F5F9;" >httppage</span> <br> 
<span style="background-color:#F1F5F9; ">im</span> <br> 
</div> 
</body> 
</html>

Source

2010-08-05 12:19:28 KoolKabin

Merci de passer la peine de réparer mes travées. Leçon apprise :) – LamonteCristo

a <div> est un élément de type bloc - cela signifie qu'il automatiquement cl oreilles à une nouvelle ligne et a 100% de largeur. Sans voir votre code html ou css il est difficile de voir où vous allez mal, mais essayez d'utiliser float:

div { 
    float: right; 
    width: 50%; 
}

Edit:
Maintenant que vous avez posté une photo de ce que vous voulez, je peux dire que vous voudrez probablement quelque chose comme ceci:
HTML:

<div id="container"> 
    <img src="foo.jpg" /> 
    <div id="content"> 
     <p>Blah blah</p> 
     <p>More blah blah</p> 
    </div> 
</div>

CSS:

#content { 
    width: 60%; 
    float: right; 
}

Assurez-vous simplement que la largeur de la largeur img + de la div interne est inférieure à la largeur de la div contenant.

Source

2010-08-05 12:19:28

Merci d'expliquer ceci à un css n00b! – LamonteCristo

En ce qui concerne l'édition: un P est-il meilleur qu'un Span? – LamonteCristo

Sémantiquement, un p est un paragraphe de texte, alors que span ne signifie rien sémantiquement. C'est entièrement à vous de choisir ce que vous avez choisi, en gardant à l'esprit que p est un élément de bloc et que span est en ligne. –

Div est un élément de niveau bloc. Il prendra toute la largeur et générera une pause avant et après. Img est, par défaut, un élément en ligne.

Vous voulez envelopper dans un autre (pas de flotteur). Soit utiliser span à la place (span est en ligne frère de div) ou définir la propriété css display à inline sur la div.

Source

2010-08-05 12:40:06

Merci, comment puis-je savoir si une balise donnée est en ligne ou en bloc? – LamonteCristo

http://htmlhelp.com/reference/html40/block.html est une liste d'éléments de niveau bloc. Les balises restantes sont en ligne. –

Un truc très utile pour ce genre de choses est le "display: inline-block".

Il affiche les choses en ligne (de sorte que l'emballage fonctionnera), mais vous laisse avec presque la configurabilité complète d'un élément de niveau bloc.

Source

2010-08-05 12:42:42

Je vois que div vs span peut être un débat religieux ... donc je ne prends aucun site et + 1 de chaque côté. Merci pour le conseil. J'aime les options lors de la conception :) – LamonteCristo

Eh, ce n'est pas tellement sur la religion, juste ce que vous trouvez logique. Pour moi les travées n'ont jamais vraiment de sens, il y a généralement des options sémantiquement meilleures pour le texte en ligne (label, em, strong etc.) –

Bon à savoir. Et oui, je ne peux me voir en utilisant des travées dans des situations où je suis lié à des données ... mais cela me fait penser ... peut-être que je devrais ouvrir une nouvelle question pour cela. – LamonteCristo

Si vous créez un div "textbox" autour de votre texte et que vous le laissez flotter à gauche, vous devriez être prêt à partir. Voir:

<html> 
<head> 
<title> 
</title> 
<style type="text/css"> 
.contactLarge{ 
    width: 250px; 
    height: 220px; 
} 
img.picture { 
    margin-left: 0px; 
    margin-bottom: 0px; 
    float: left; 
} 
.textbox { 
    float: left; 
} 
.contactLarge item{ 
} 
</style> 
</head> 
<body> 
<div class="contactLarge"> 
<div style="background-color:#C5CED8;clear:both">title </div> 
<img class="picture" width="100" height="200" src="ContactBigLeftBorder.png" alt=""> 

<div class="textbox"> 
First, Last <br> 
First, Last <br> 
First, Last <br> 

First, Last <br> 
<div style="width:100%;font-weight:bold; float: left;">LastName, Firstname</div> 
<div style="font-weight:bold;clear:both;" >CompanyName</div> 
<div >Title</div> 
<div >Work#</div> 
<div >Mobile#</div> 
<div >Home</div> 
<div >email1</div> 
<div >email2</div> 

<div >email3</div> 
<div >Street</div> 
<div style="background-color:#F1F5F9; float:left;" >City,</div> 
<div style="background-color:#F1F5F9; float:left;" >State</div> 
<div style="background-color:#F1F5F9;" >Zip</div> 
<div style="background-color:#F1F5F9; clear:left; float:left;" >httppage</div> 
<div style="background-color:#F1F5F9; ">im</div> 
</div> 

</div> 
</body> 
</html>

Source

2010-08-05 16:23:32 tomvon

Envelopper une div d'une ligne autour d'un img (pas de texte)

Répondre

Questions connexes