web-dev-qa-db-ja.com

CSSでテキストの2列を自動的にフロー

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

<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エディターを介して入力されるためです。

javascripthtmlcsscss3two-columns
61
Joseph Mastey

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>

更新：

Or現在の要件は、それらを同じサイズにすることです。事前に構築されたjQueryプラグインを使用することをお勧めします。 Columnizer jQuery Plugin

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

35
Glennular

つかいます 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-）
113
Glennular

現在、CSS/HTMLでのみ2つの列を自動的に隣り合わせにフローティングすることはできません。これを達成する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; */ }

また、段落間にclearer-divを挿入して、固定の高さを使用する必要がないようにすることもできます。 two列が必要な場合は、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番目のオプションは、これがオプションである場合、このすべての列への分割アクションをサーバー側で発生させることです。

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

CSS3の方法 について読むかもしれませんが、実稼働Webサイトには実際的ではありません。まだ、少なくとも。

22
Arve Systad

簡単な2列クラスの例を次に示します。

.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
99freebies.blogspot.com

ここの専門家ではありませんが、これは私がやったことであり、うまくいきました

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

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

前向き

以下に、列を作成するための以下の方法があります。

  1. 静的（2列）
  2. JavaScript + CSSを使用した動的（n列）
  3. ダイナミックw/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を使用した動的（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列）

これは 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
Mr. Polywhirl

このソリューションは2つの列に分割され、コンテンツを半分の行に分割します。これは、最初の列にロードされたデータを操作している場合に便利です。毎回均等に。 :)。最初の列に入れられる量で遊ぶことができます。これはリストでも機能します。

楽しい。

<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

たぶんわずかにタイトなバージョンですか？私のユースケースは、メジャー（データ）の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