поток 2 колонки текста автоматически с помощью CSS

у меня есть код, похожий на следующий:

<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>

Я хочу, без разметки, если это возможно, привести этот текст в две колонки (1-3 слева, 4-6 справа). Причина моего колебания, чтобы добавить столбец с помощью <div> заключается в том, что этот текст вводится клиентом через редактор WYSIWYG, поэтому любые элементы, которые я вводил, скорее всего, будут убиты позже или необъяснимо.

8 59
javascript html css css3 two-columns

8 ответов:

С помощью jQuery

создайте второй столбец и переместите в него необходимые элементы.

<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>

обновление:

или поскольку требование к их одинакового размера. Я бы предложил использовать готовые плагины jQuery:Обозреватель jQuery плагин

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

35

использовать CSS3

.container {
   -webkit-column-count: 2;
      -moz-column-count: 2;
           column-count: 2;

   -webkit-column-gap: 20px;
      -moz-column-gap: 20px;
           column-gap: 20px;
}

Поддержка Браузеров

  • Chrome 4.0+ (-webkit-)
  • IE 10.0+
  • Firefox 2.0+ (-moz-)
  • Safari 3.1+ (-webkit-)
  • Opera 15.0+ (-webkit-)
103

автоматическое перемещение двух столбцов рядом друг с другом в настоящее время невозможно только с помощью CSS/HTML. Два способа добиться этого:

метод 1: Когда нет непрерывного текста, просто много не связанных между собой абзацев:

переместите все абзацы влево, дайте им половину ширины содержащего элемента и, если возможно, установите фиксированную высоту.

<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; */ }

вы также можете вставить clearer-divs между абзацами, чтобы избежать использования фиксированной высоты. Если вы хотите два столбцы, добавьте более четкий div между двумя и двумя абзацами. Это позволит выровнять верхнюю часть двух следующих пунктов, что делает его более аккуратным. Пример:

<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; }

Метод 2: Когда текст непрерывен

более продвинутый, но это можно сделать.

<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; }

когда дело доходит до простоты использования: ни один из них не очень прост для нетехнического клиента. Вы можете попытаться объяснить ему/ей, как это сделать правильно, и сказать ему / ей, почему. Обучающий очень простой HTML-это не плохая идея в любом случае, если клиент будет обновлять веб-страницы через WYSIWYG-редактор в будущем.

или вы можете попробовать реализовать некоторое Javascript-решение, которое подсчитывает общее количество абзацев, разбивает их на два и создает столбцы. Это также будет постепенно снижать для тех, у кого отключен JavaScript. Третий вариант-иметь все это разделение на столбцы-действие происходит на сервере, если это опция.

(Метод 3: CSS3 Модуль макета с несколькими колонками)

вы можете прочитать о CSS3 способ сделать это, но это не очень практично для производственного сайта. По крайней мере, пока.

22

вот пример простого класса с двумя столбцами:

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

из которых вы бы применили к блоку текста вот так:

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

не эксперт здесь, но это то, что я сделал, и это сработало

<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>

Как только текст внутри <p> теги достигли высоты контейнера div, другой текст будет течь справа от контейнера.

3

ниже я создал как статический, так и динамический подход при колонке абзацев. Код в значительной степени самодокументирован.

предисловие

ниже, вы найдете следующие методы для создания столбцов:

  1. статический (2-колонки)
  2. динамический w / JavaScript + CSS (n-столбцы)
  3. динамический w / JavaScript + CSS3 (n-columns)

статический (2-колонки)

это просто 2 расположение столбцов. На основе Glennular ' s 1-й ответ.

$(document).ready(function () {
    var columns = 2;
    var size = $("#data > p").size();
    var half = size / columns;
    $(".col50 > p").each(function (index) {
        if (index >= half) {
            $(this).appendTo(".col50:eq(1)");
        }
    });
});
.col50 {
    display: inline-block;
    vertical-align: top;
    width: 48.2%;
    margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col50">
    <!-- 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>
    <p>This is paragraph 7. Lorem ipsum ...</p>
    <p>This is paragraph 8. Lorem ipsum ...</p>
    <p>This is paragraph 9. Lorem ipsum ...</p>
    <p>This is paragraph 10. Lorem ipsum ...</p>
    <p>This is paragraph 11. Lorem ipsum ...</p>
    <!-- data End-->
</div>
<div class="col50"></div>

динамический w / JavaScript + CSS (n-столбцы)

при таком подходе я по существу определяю, должен ли блок быть преобразован в столбцы. Формат col-{n}. n - это количество столбцов, которые вы хотите создать.

$(document).ready(function () {
    splitByColumns('col-', 4);
});

function splitByColumns(prefix, gap) {
    $('[class^="' + prefix + '"]').each(function(index, el) {
        var me = $(this);
        var count = me.attr("class").split(' ').filter(function(className) {
            return className.indexOf(prefix) === 0;
        }).reduce(function(result, value) {
            return Math.max(parseInt(value.replace(prefix, '')), result);
        }, 0);
        var paragraphs = me.find('p').get();
        me.empty(); // We now have a copy of the children, we can clear the element.
        var size = paragraphs.length;
        var percent = 1 / count;
        var width = (percent * 100 - (gap / count || percent)).toFixed(2) + '%';
        var limit = Math.round(size / count);
        var incr = 0;
        var gutter = gap / 2 + 'px';
        for (var col = 0; col < count; col++) {
            var colDiv = $('<div>').addClass('col').css({ width: width });
            var css = {};
            if (col > -1 && col < count -1) css['margin-right'] = gutter;
            if (col > 0 && col < count)     css['margin-left'] = gutter;
            colDiv.css(css);
            for (var line = 0; line < limit && incr < size; line++) {
                colDiv.append(paragraphs[incr++]);
            }
            me.append(colDiv);
        }
    });
}
.col {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-6">
    <!-- 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>
    <p>This is paragraph 7. Lorem ipsum ...</p>
    <p>This is paragraph 8. Lorem ipsum ...</p>
    <p>This is paragraph 9. Lorem ipsum ...</p>
    <p>This is paragraph 10. Lorem ipsum ...</p>
    <p>This is paragraph 11. Lorem ipsum ...</p>
    <!-- data End-->
</div>

динамический w / JavaScript + CSS3 (n-столбцы)

это было получено из on Glennular ' s 2-й ответ. Он использует column-count и column-gap CSS3 правила.

$(document).ready(function () {
    splitByColumns('col-', '4px');
});

function splitByColumns(prefix, gap) {
    var vendors = [ '', '-moz', '-webkit-' ];
    var getColumnCount = function(el) {
        return el.attr("class").split(' ').filter(function(className) {
            return className.indexOf(prefix) === 0;
        }).reduce(function(result, value) {
            return Math.max(parseInt(value.replace(prefix, '')), result);
        }, 0);
    }
    $('[class^="' + prefix + '"]').each(function(index, el) {
        var me = $(this);
        var count = getColumnCount(me);
        var css = {};
        $.each(vendors, function(idx, vendor) {
            css[vendor + 'column-count'] = count;
            css[vendor + 'column-gap'] = gap;
        });
        me.css(css);
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data" class="col-3">
    <!-- 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>
    <p>This is paragraph 7. Lorem ipsum ...</p>
    <p>This is paragraph 8. Lorem ipsum ...</p>
    <p>This is paragraph 9. Lorem ipsum ...</p>
    <p>This is paragraph 10. Lorem ipsum ...</p>
    <p>This is paragraph 11. Lorem ipsum ...</p>
    <!-- data End-->
</div>
1

это решение разделится на два столбца и разделит содержимое наполовину в одной строке наполовину в другой. Это удобно, если вы работаете с данными, которые загружаются в первый столбец, и хотите, чтобы они текли равномерно каждый раз. :). Вы можете играть с тем количеством, которое помещается в первый столбец. Это будет работать также со списками.

наслаждайтесь.

<html>
<head>
<title>great script for dividing things into cols</title>



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script>
$(document).ready(function(){

var count=$('.firstcol span').length;
var selectedIndex =$('.firstcol span').eq(count/2-1);
var selectIndexafter=selectedIndex.nextAll();


if (count>1)
{
selectIndexafter.appendTo('.secondcol');
}

 });

</script>
<style>
body{font-family:arial;}
.firstcol{float:left;padding-left:100px;}
.secondcol{float:left;color:blue;position:relative;top:-20;px;padding-left:100px;}
.secondcol h3 {font-size:18px;font-weight:normal;color:grey}
span{}
</style>

</head>
<body>

<div class="firstcol">

<span>1</span><br />
<span>2</span><br />
<span>3</span><br />
<span>4</span><br />
<span>5</span><br />
<span>6</span><br />
<span>7</span><br />
<span>8</span><br />
<span>9</span><br />
<span>10</span><br />
<!--<span>11</span><br />
<span>12</span><br />
<span>13</span><br />
<span>14</span><br />
<span>15</span><br />
<span>16</span><br />
<span>17</span><br />
<span>18</span><br />
<span>19</span><br />
<span>20</span><br />
<span>21</span><br />
<span>22</span><br />
<span>23</span><br />
<span>24</span><br />
<span>25</span><br />-->
</div>


<div class="secondcol">


</div>


</body>

</html>
0

может быть, немного более жесткая версия? Мой вариант использования-выводить Майоров колледжа с учетом массива JSON Майоров (данных).

var count_data      = data.length;

$.each( data, function( index ){
    var column = ( index < count_data/2 ) ? 1 : 2;
    $("#column"+column).append(this.name+'<br/>');
});

<div id="majors_view" class="span12 pull-left">

  <div class="row-fluid">
    <div class="span5" id="column1"> </div>
    <div class="span5 offset1" id="column2"> </div>
  </div>

</div>
0