Problème flottant css

J'ai environ 8 paragraphes que je voudrais faire flotter à gauche, mais certains des paragraphes ont plus de texte que d'autres. Donc quand je regarde dans un navigateur, j'obtiens le flottant de gauche à droite que je veux, mais je reçois plusieurs courts paragraphes dans une colonne quand certains paragraphes sont plus longs et d'autres plus courts.Problème flottant css

Ce que je veux, c'est que chaque nouveau paragraphe soit dans une nouvelle colonne. Puis-je le faire avec css, ou est-ce que je dois utiliser une structure de table?

Désolé, je le montrerais visuellement mais le html en ligne ne fonctionne pas comme prévu.

Source

2009-12-01 vwfreak

Il serait utile si vous pouviez poster du code, ou même mieux un lien vers ce que vous obtenez et peut-être une maquette de Photoshop de ce que vous voulez. –

Votre question est un peu confuse. Vous dites que vous voulez que chaque paragraphe dans sa propre colonne indique que vous voulez 8 colonnes. Mais l'exemple d'une table que vous donnez a 3 colonnes avec du texte dans chaque qui ne sont pas des paragraphes. Vous obtiendrez probablement beaucoup de bonnes réponses de personnes plus intelligentes que moi si vous pouvez clarifier un peu. :) – Cfreak

Si vous téléchargez le fichier html sur un serveur alors donnez-nous un lien, il pourrait être utile. –

J'ai du mal à imaginer ce que votre mise en page ressemble, mais avez-vous essayé

clear: left

clear: right

Ils font que l'élément s'accroche à la position "non-flotter" suivante. Je ne sais pas si cela répond à votre situation.

Source

2009-12-01 18:07:28

Définir une largeur fixe à chacun des paragraphes peut-être?

Source

2009-12-01 18:12:59

Si vous voulez des colonnes, vous pouvez définir une largeur de la classe qui contrôle le flotteur, sinon il est un bloc et prend 100% de la largeur de son conteneur:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>de titel</title> 
     <style type="text/css"> 
       .left 
       { 
       float:left; 
       width:100px; 
       } 
       body 
          { 
          width:2300px; 
          } 
     </style> 
    </head> 
    <body> 
     <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. </p> 
     <p class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. 
     </p> 
     <p class="left"> 
     Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. 
     </p> 
     <p class="left"> 
     Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. 
     </p> 
     <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. </p> 
     <p class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. 
     </p> 
     <p class="left"> 
     Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. 
     </p> 
     <p class="left"> 
     Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. 
     </p> 
    </body> 
</html>

Source

2009-12-01 18:49:39 tahdhaze09

J'ai ajouté une largeur au corps afin que les paragraphes puissent traverser comme des colonnes. – tahdhaze09

Problème flottant css

Répondre

Questions connexes