HTML Harmoniser Texte

Je veux afficher du texte sur une page comme de la façon suivante:HTML Harmoniser Texte

My Text: Text Here 
My Text: More Text Here......................................................... 
     Text from line above continued here.

Je le balisage suivant juste pour tester:

<html> 
<head> 
    <style type="text/css"> 
    body { 
     font-family: arial; 
    } 
    form div { 
     padding: 3px; 
    } 
    form .label { 
     float: left;  
     text-align: right; 
     width: 150px; 
     margin-right: 8px; 
    } 
    </style> 
</head> 
<body> 
    <form> 
     <div class="label">My Text:</div> 
     <div>Aenean tellus diam, pharetra sed posuere sed, ullamcorper eget enim. Suspendisse quis posuere nisi. Integer sodales neque id erat luctus suscipit. Curabitur in nisi arcu. Curabitur suscipit tellus non lectus blandit non mollis risus aliquet. Proin et felis nulla. Integer ut felis nibh, eu condimentum elit. Sed tincidunt fermentum lorem, convallis ornare ipsum mattis sed. Vestibulum vel quam sed velit condimentum volutpat eu sed enim. Duis tincidunt, turpis id suscipit molestie, erat tortor tincidunt augue, eu venenatis erat neque nec nisi. Nunc malesuada bibendum elit eu bibendum.</div> 
     <div class="label">My Text 2:</div> 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit arcu ut risus dapibus tincidunt et ut orci. Vestibulum vitae urna in ligula fringilla facilisis aliquet vel nisl. Quisque placerat risus eget arcu fermentum at consectetur arcu lobortis. In hac habitasse platea dictumst. In in libero non justo pellentesque cursus quis non nisi. Donec sit amet pharetra ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla enim enim, fringilla vitae sodales id, ultrices non lacus. Etiam id augue ut dui convallis hendrerit. Vivamus urna justo, dignissim in suscipit eu, facilisis a libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. .</div> 
    </form> 
</body>

Lorsque cela est rendu à peu près la moitié du texte est affiché sous la classe "label" correspondante div. Je voudrais que tout le texte apparaisse à droite du div "label".

Source

2010-06-10 nevillejones

<html> 
<head> 
    <style type="text/css"> 
    body { 
     font-family: arial; 
    } 
    div { 
     border: 1px solid red; 
    } 
    form div { 
     padding: 3px; 
    } 
    form .label { 
     float: left;  
     text-align: right; 
     width: 150px; 
     margin-right: 8px; 
    } 
    form .content { 
     float: left;  
     width: 450px; 
    } 
    </style> 
</head> 
<body> 
    <form> 
     <div class="label">My Text:</div> 
     <div class="content">Aenean tellus diam, pharetra sed posuere sed, ullamcorper eget enim. Suspendisse quis posuere nisi. Integer sodales neque id erat luctus suscipit. Curabitur in nisi arcu. Curabitur suscipit tellus non lectus blandit non mollis risus aliquet. Proin et felis nulla. Integer ut felis nibh, eu condimentum elit. Sed tincidunt fermentum lorem, convallis ornare ipsum mattis sed. Vestibulum vel quam sed velit condimentum volutpat eu sed enim. Duis tincidunt, turpis id suscipit molestie, erat tortor tincidunt augue, eu venenatis erat neque nec nisi. Nunc malesuada bibendum elit eu bibendum.</div> 
     <br style="clear:both"> 
     <div class="label">My Text 2:</div> 
     <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit arcu ut risus dapibus tincidunt et ut orci. Vestibulum vitae urna in ligula fringilla facilisis aliquet vel nisl. Quisque placerat risus eget arcu fermentum at consectetur arcu lobortis. In hac habitasse platea dictumst. In in libero non justo pellentesque cursus quis non nisi. Donec sit amet pharetra ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla enim enim, fringilla vitae sodales id, ultrices non lacus. Etiam id augue ut dui convallis hendrerit. Vivamus urna justo, dignissim in suscipit eu, facilisis a libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. .</div> 
    </form> 
</body>

Source

2010-06-10 18:18:29 RedFilter

-1

Il est parce que vous avez utilisé float

float: left;

flotteur soulève l'élément (comme si elle nageait) et laisse d'autres vont au-dessous. Il n'y en a pas besoin de toute façon.

QUOIQUE

Si j'essaie votre code here cela fonctionne très bien.

EDIT

n'a pas vu votre édition !!

Utilisez

form div .text{ 
    margin-left: 160px; 
}

Source

2010-06-10 18:14:42 nebkat

Votre exemple ne fonctionne pas. –

ajouter float: left; à votre div css.

Source

2010-06-10 18:15:37 NibblyPig

Si vous faites cela, assurez-vous de définir une largeur sur vos divs de droite, ou ils vont passer à la ligne suivante. – MikeWyatt

Utilisez un tableau. Ha ha. Je rigole. Ne fais pas ça.

Puisque vous coder en dur la largeur des étiquettes, vous pouvez simplement donner votre texte une marge gauche d'une valeur légèrement plus grande:

form div { 
    /* ...existing styles... */ 
    margin-left:160px; 
} 
form .label { 
    /* ...existing styles... */ 
    margin-left: 0px; /* cancel out margin-left (or you could re-arrange your classes to make this unnecessary) */ 
}

Source

2010-06-10 18:15:41 MikeWyatt

Vous pouvez utiliser padding-left sur la deuxième div:

<div class="label">...</div> 
<div style="padding-left: 200px">...</div>

Source

2010-06-10 18:19:32 Anax

Vous devez régler la hauteur de l'étiquette:

form .label { 
    float: left;  
    text-align: right; 
    width: 150px; 
    margin-right: 8px; 
}

...

<div class="label" style="height:100px;">My Text 2:</div> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit arcu ut risus dapibus tincidunt et ut orci. Vestibulum vitae urna in ligula fringilla facilisis aliquet vel nisl. Quisque placerat risus eget arcu fermentum at consectetur arcu lobortis. In hac habitasse platea dictumst. In in libero non justo pellentesque cursus quis non nisi. Donec sit amet pharetra ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla enim enim, fringilla vitae sodales id, ultrices non lacus. Etiam id augue ut dui convallis hendrerit. Vivamus urna justo, dignissim in suscipit eu, facilisis a libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. .</div>

Source

2010-06-10 18:19:37

L'inconvénient de cette approche est qu'elle repose sur la bonne boîte ne dépassant jamais 100px. – MikeWyatt

@MikeWyat Ou tout ce que vous spécifiez, d'accord. J'utilise beaucoup cette méthode sur mon site personnel. Si quelqu'un a une meilleure solution, postez-la, je me ferai un plaisir de mettre à jour mon code! –

HTML Harmoniser Texte

Répondre

Questions connexes