indentation

Question

Je css aime faire, comme dans indesign ou quark ... tiret paragraphe ... pour picure

comment est la bonne façon de le faire en html et css

Je ne veux pas que le texte pour faire le tour de l'image ... j'aime avoir toute la partie gauche protégée en mettant la marge à l'image fera l'affaire ... mais pour 10-20-30 pixel (montant fixe (mauvais))

J'ai essayer le positionnement négatif .. pas de chance!

Voici une petite image qui explique!

alt text http://produits-lemieux.com/indent.jpg

Answer 1

Avez-vous essayé de mettre les deux colonnes et div et les faisant flotter à gauche, comme dans:

<div style="float:left;"> 
    <img src="x"/> 
</div> 
<div style="float:left;"> 
    Text .... 
</div> 

divs flottants gauche va les garder côte à côte aussi longtemps qu'il ya assez chambre.

Answer 2

Si les images auront toujours la même largeur, vous pouvez le faire assez facilement. Placez l'image dans un div, et le contenu dans un autre. Ensuite, utilisez le css suivant:

div.pic { 
    position: relative; 
    float: left; 
    padding-right: 10px; 
    clear: left; 
    width: 65px; /* The width of the picture */ 
} 

div.content { 
    position: relative; 
    float: left; 
    clear: right; 
    width: 450px; /* The container's width minus (picture + 10px padding) 
} 

Answer 3

Si l'image doit avoir la même largeur, le code suivant devrait fonctionner (testé dans Safari 4).

Fondamentalement: faites flotter l'image vers la gauche, puis poussez le texte vers la droite en utilisant les marges (le remplissage fonctionne aussi). (La marge doit être au moins la largeur de l'image, de préférence, il devrait être plus grande pour qu'il y ait un intervalle entre l'image et le texte.)

HTML:

<div class="box"> 
    <img src="http://url.to/image.jpg" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <p class="source">Source: Le Petit Robert 2009</p> 
</div> 

CSS:

img { 
    float: left; 
} 

p { 
    margin-left: 80px; 
} 

Answer 4

S'il est juste un paragraphe que vous êtes préoccupé par, vous pouvez utiliser:

p { 
    overflow: hidden; 
} 

Mais cela fonctionne pour juste le paragraphe qui commence à côté de l'image.

Answer 5

Non recommandé dans tous les cas, mais une bonne alternative si vous ne voulez pas/ne peut pas modifier votre balisage: Equal height columns using Javascript