CSS を使用して 2 列のテキストを自動的に流し込む

StackOverflow https://stackoverflow.com/questions/3009670

質問

次のようなコードがあります。

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

可能であればマークアップなしで、このテキストを 2 つの列 (左側に 1 ～ 3、右側に 4 ～ 6) に流し込みたいと考えています。を使用して列を追加することをためらった理由 <div> ただし、このテキストはクライアントによって WYSIWYG エディターを介して入力されるため、挿入した要素は後で、または不可解な理由で強制終了される可能性があります。

役に立ちましたか？

解決

jQueryの使用

2 番目の列を作成し、必要な要素をその中に移動します。

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

他のヒント

使用 CSS3

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

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

ブラウザのサポート

  • クロム 4.0 以降 (-webkit-)
  • IE10.0以上
  • Firefox 2.0以降 (-moz-)
  • サファリ 3.1+ (-webkit-)
  • オペラ 15.0+ (-webkit-)

は自動的に次のお互いへの2つの列を浮動のみCSS / HTMLで、現在は不可能です。これを達成するために2つの方法：

方法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を挿入することができます。あなたがの2つのの列が必要な場合は、2-と-2段落の間に明確-のdivを追加します。これは、2次の段落の先頭を揃えることが、よりきちんと見えるようになります。例：

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

それは使いやすさに来るとき：これらはいずれも非技術的なクライアントのために本当に簡単ではありません。あなたはこれを適切に行うには、なぜ彼/彼女に伝えるためにどのように彼/彼女に説明しようとする場合があります。クライアントは、将来的にWYSIWYGエディタを経由してWebページを更新しようとしている場合は非常に基本的なHTMLを学ぶことは、とにかく悪い考えではありません。

それとも、段落の合計数をカウント2でそれらを分割して、列を作成し、いくつかのJavaScriptソリューションを実装しようとすることができます。これはまた、JavaScriptが無効になっている人のために正常に低下します。第三の選択肢は、これはオプションである場合は、すべてこの分割-へ - コラム - アクションがサーバーサイドに起こることです。

（方法3：CSS3マルチコラムレイアウトモジュール）

あなたはそれをやっての CSS3方法について読んかもしれないが、そうではありません生産のウェブサイトのための本当に実用的。まだ、少なくとも。

ここでは、単純な二列クラスの例である：

.two-col {
       -moz-column-count: 2;
       -moz-column-gap: 20px;
       -webkit-column-count: 2;
       -webkit-column-gap: 20px;
}
あなたはそのようなテキストのブロックに適用されることになるのは、

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

はない専門家が、これは私がやった、それが働いたものです。

<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の高さに達した後は、

、他のテキストは、コンテナの右に流れます。

以下では、段落を列化する際の静的アプローチと動的アプローチの両方を作成しました。コードはほとんど自己文書化されています。

フォワード

以下に、列を作成するための次の方法を示します。

  1. 静的 (2 列)
  2. JavaScript + CSS による動的 (n 列)
  3. JavaScript + CSS3 による動的 (n 列)

静的 (2 列)

シンプルな2カラムのレイアウトです。に基づく グレンニュラーさんの 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 による動的 (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>

JavaScript + CSS3 による動的 (n 列)

これはから導き出されたものです グレンニュラーさんの 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>

のこの溶液は、2つの列に分割し、他の1ラインの半分にコンテンツの半分を分割します。 これは、あなたが最初の列にロードされるデータを使用している場合に便利ですし、それが均等にするたびに流れるようにしたいです。 :)。あなたは最初のCOLに入れます量で遊ぶことができます。これは、同様にリストを操作されます。

お楽しみいただけます。

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

たぶん、少しタイトバージョン？私のユースケースは、メジャーの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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top