Ответ 1

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

Update:

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

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

Ответ 2

Используйте 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-)

Ответ 3

Автоматически плавающие два столбца рядом с eachother в настоящее время не возможны только с помощью 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 между абзацами, чтобы избежать необходимости использовать фиксированную высоту. Если вам нужны два столбца, добавьте clearer-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, как это сделать, но это не очень практично для производственного сайта. По крайней мере, пока нет.

Ответ 4

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

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

Из которого вы бы применили к блоку текста следующим образом:

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

Ответ 5

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

<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 контейнера, другой текст будет перемещаться справа от контейнера.

Ответ 6

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

Предисловие

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

• Статические (2 столбца)
• Динамический w/JavaScript + CSS (n-columns)
• Динамический w/JavaScript + CSS3 (n-columns)

Статические (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>

Ответ 7

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

Enjoy.

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

Ответ 8

Может быть, немного более плотная версия? Мой прецедент выводит колледжей майоров с учетом 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>