71

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

<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) に流し込みたいと思います。a を使用して列を追加することを躊躇する理由<div>は、このテキストがクライアントによって WYSIWYG エディターを介して入力されるためです。

4

8 に答える 8

150

使用する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-)
  • Internet Explorer 10.0+
  • Firefox 2.0+ ( -moz-)
  • サファリ 3.1+ ( -webkit-)
  • Opera 15.0+ ( -webkit-)
于 2010-06-14T20:59:21.997 に答える
35

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プラグインを使用することをお勧めします：Columnizer jQuery Plugin

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

于 2010-06-14T16:40:28.403 に答える
22

隣り合う 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; */ }

固定の高さを使用する必要がないように、段落間に clearer-div を挿入することもできます。2 つの列が必要な場合は、2 つと 2 つの段落の間に clearer-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 サイトでは実用的ではありません。少なくとも、まだです。

于 2010-06-14T16:15:33.687 に答える
5

以下は単純な 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>
于 2013-08-04T16:06:06.877 に答える
3

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

<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 の高さに達すると、他のテキストはコンテナーの右側に流れます。

于 2012-12-10T22:58:24.293 に答える
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>
于 2014-08-04T15:29:15.750 に答える
0

このソリューションは 2 つの列に分割され、コンテンツの半分が 1 行に分割され、もう 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>
于 2012-08-02T19:28:13.343 に答える