flux de 2 colonnes de texte automatiquement avec CSS

Question

J'ai un code similaire à celui qui suit :

<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>

J'aimerais, sans balises si possible, faire en sorte que ce texte s'écoule en deux colonnes (1-3 à gauche, 4-6 à droite). La raison pour laquelle j'hésite à ajouter une colonne à l'aide d'une balise <div> est que ce texte est saisi par le client via un éditeur WYSIWYG, de sorte que tous les éléments que j'injecte sont susceptibles d'être supprimés ultérieurement ou de manière inexplicable.

Answer 1

Utilisez CSS3

.container{
  column-count: 2;
  column-gap: 20px;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
}

Answer 2

Utilisation de jQuery

Créez une deuxième colonne et déplacez-y les éléments dont vous avez besoin.

<script type="text/javascript">
  $(document).ready(function() {
    var size = $("#data > p").size();
 $(".Column1 > p").each(function(index){
  if (index >= size/2){
   $(this).appendTo("#Column2");
  }
 });
  });
</script>

<div id="data" class="Column1" style="float:left;width:300px;">
<!--   data Start -->
<p>This is paragraph 1. Lorem ipsum ... </p>
<p>This is paragraph 2. Lorem ipsum ... </p>
<p>This is paragraph 3. Lorem ipsum ... </p>
<p>This is paragraph 4. Lorem ipsum ... </p>
<p>This is paragraph 5. Lorem ipsum ... </p>
<p>This is paragraph 6. Lorem ipsum ... </p>
<!--   data Emd-->
</div>
<div id="Column2" style="float:left;width:300px;"></div>

Mise à jour :

Ou Puisque l'exigence actuelle est de les avoir de taille égale. Je vous suggère d'utiliser les plugins jQuery préconçus : Plugin jQuery Columnizer

http://jsfiddle.net/dPUmZ/1/

Answer 3

Faire flotter automatiquement deux colonnes l'une à côté de l'autre n'est actuellement possible qu'avec les CSS/HTML. Il existe deux façons d'y parvenir :

Méthode 1 : Quand il n'y a pas de texte continu, juste beaucoup de paragraphes sans rapport entre eux :

Faites flotter tous les paragraphes vers la gauche, donnez-leur la moitié de la largeur de l'élément qui les contient et, si possible, définissez une hauteur fixe.

<div id="container">
  <p>This is paragraph 1. Lorem ipsum ... </p>
  <p>This is paragraph 2. Lorem ipsum ... </p>
  <p>This is paragraph 3. Lorem ipsum ... </p>
  <p>This is paragraph 4. Lorem ipsum ... </p>
  <p>This is paragraph 5. Lorem ipsum ... </p>
  <p>This is paragraph 6. Lorem ipsum ... </p>
</div>

#container { width: 600px; }
#container p { float: left; width: 300px; /* possibly also height: 300px; */ }

Vous pouvez également insérer des clearer-divs entre les paragraphes pour éviter de devoir utiliser une hauteur fixe. Si vous voulez deux colonnes, ajoutez un clearer-div entre deux et deux paragraphes. Cela permettra d'aligner le haut des deux paragraphes suivants, ce qui donnera un aspect plus ordonné. Exemple :

<div id="container">
  <p>This is paragraph 1. Lorem ipsum ... </p>
  <p>This is paragraph 2. Lorem ipsum ... </p>
  <div class="clear"></div>
  <p>This is paragraph 3. Lorem ipsum ... </p>
  <p>This is paragraph 4. Lorem ipsum ... </p>
  <div class="clear"></div>
  <p>This is paragraph 5. Lorem ipsum ... </p>
  <p>This is paragraph 6. Lorem ipsum ... </p>
</div>

/* in addition to the above CSS */
.clear { clear: both; height: 0; }

Méthode 2 : Lorsque le texte est continu

Plus avancé, mais c'est possible.

<div id="container">
  <div class="contentColumn">
    <p>This is paragraph 1. Lorem ipsum ... </p>
    <p>This is paragraph 2. Lorem ipsum ... </p>
    <p>This is paragraph 3. Lorem ipsum ... </p>
  </div>
  <div class="contentColumn">
    <p>This is paragraph 4. Lorem ipsum ... </p>
    <p>This is paragraph 5. Lorem ipsum ... </p>
    <p>This is paragraph 6. Lorem ipsum ... </p>
  </div>
</div>

.contentColumn { width: 300px; float: left; }
#container { width: 600px; }

En ce qui concerne la facilité d'utilisation : aucune de ces solutions n'est vraiment facile pour un client non technique. Vous pouvez essayer de lui expliquer comment faire correctement, et lui dire pourquoi. Apprendre les bases du HTML n'est pas une mauvaise idée, si le client est amené à mettre à jour les pages Web via un éditeur WYSIWYG à l'avenir.

Vous pouvez aussi essayer d'implémenter une solution Javascript qui compte le nombre total de paragraphes, les divise en deux et crée des colonnes. Cette solution se dégradera également pour ceux qui ont désactivé JavaScript. Une troisième option est de faire en sorte que toute cette action de division en colonnes se produise sur le serveur, si c'est possible.

(Méthode 3 : Module de mise en page multi-colonnes CSS3)

Vous pouvez lire sur le Façon de faire en CSS3 mais ce n'est pas vraiment pratique pour un site Web de production. Pas encore, en tout cas.

Answer 4

Voici un exemple d'une classe simple à deux colonnes :

.two-col {
       -moz-column-count: 2;
       -moz-column-gap: 20px;
       -webkit-column-count: 2;
       -webkit-column-gap: 20px;
}

que vous appliquerez à un bloc de texte de la manière suivante :

<p class="two-col">Text</p>

Answer 5

Je ne suis pas un expert, mais c'est ce que j'ai fait et ça a marché.

<html>
<style>
/*Style your div container, must specify height*/
.content {width:1000px; height:210px; margin:20px auto; font-size:16px;}
/*Style the p tag inside your div container with half the with of your container, and float left*/
.content p {width:490px; margin-right:10px; float:left;}
</style>

<body>
<!--Put your text inside a div with a class-->
<div class="content">
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida laoreet lectus. Pellentesque ultrices consequat placerat. Etiam luctus euismod tempus. In sed eros dignissim tortor faucibus dapibus ut non neque. Ut ante odio, luctus eu pharetra vitae, consequat sit amet nunc. Aenean dolor felis, fringilla sagittis hendrerit vel, egestas eget eros. Mauris suscipit bibendum massa, nec mattis lorem dignissim sit amet. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dolor neque. Phasellus tellus odio, egestas ut blandit sed, egestas sit amet velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>     
</body>
</html>

Une fois que le texte à l'intérieur du <p> a atteint la hauteur de la div du conteneur, l'autre texte s'écoulera vers la droite du conteneur.