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

<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, поэтому любые элементы, которые я добавляю, могут быть уничтожены позже или необъяснимым образом.

62
Joseph Mastey 10 Июн 2010 в 00:27

7 ответов

Лучший ответ

Использование 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>

< EM> Update :

Или , поскольку теперь требуется, чтобы они были одинакового размера. Я бы предложил использовать готовые плагины jQuery: плагин Columnizer jQuery

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

35
Anri 25 Мар 2013 в 12:17

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

<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
Musa 10 Дек 2012 в 23:23

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

Наслаждаться.

<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
namretiolnave 2 Авг 2012 в 19:28

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

.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
Brad Larson 4 Авг 2013 в 22:13

Автоматически перемещать два столбца рядом друг с другом в настоящее время невозможно только с помощью 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; */ }

Вы также можете вставить более четкие деления между абзацами, чтобы избежать необходимости использовать фиксированную высоту. Если вы хотите два столбца, добавьте более четкий 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 Multi-column Layout Module)

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

22
Arve Systad 14 Июн 2010 в 16:22

Может быть, немного более жесткий вариант? Мой вариант использования выводит майоры колледжа с массивом 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
sjskier 4 Авг 2014 в 15:29

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

Вперед

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

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

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

Это простой макет из 2 столбцов. На основании Glennular 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>

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

При таком подходе я по существу определяю, нужно ли преобразовывать блок в столбцы. Формат: 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>

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

Это было получено из Glennular 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
Community 23 Май 2017 в 12:26