development

CSS를 사용하여 2 열 텍스트 자동 흐름

big-blog 2020. 11. 29. 11:59

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>

가능하면 마크 업없이이 텍스트가 두 개의 열 (왼쪽에 1-3, 오른쪽에 4-6)로 흐르도록하고 싶습니다. a를 사용하여 열을 추가하는 것을 망설이는 이유 <div>는이 텍스트가 WYSIWYG 편집기를 통해 클라이언트에 의해 입력되므로 삽입 한 모든 요소가 나중에 또는 설명 할 수 없게 종료 될 가능성이 있기 때문입니다.

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>

최신 정보:

또는 이제 요구 사항은 동일한 크기를 갖는 것입니다. 미리 빌드 된 jQuery 플러그인을 사용하는 것이 좋습니다. Columnizer jQuery Plugin

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

브라우저 지원

Chrome 4.0 이상 ( -webkit-)
IE 10.0 이상
Firefox 2.0 이상 ( -moz-)
Safari 3.1 이상 ( -webkit-)
Opera 15.0 이상 ( -webkit-)

현재 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를 추가하십시오. 그러면 다음 두 단락의 상단이 정렬되어 더 깔끔하게 보입니다. 예:

<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 편집기를 통해 웹 페이지를 업데이트 할 예정이라면 매우 기본적인 HTML을 배우는 것은 어쨌든 나쁜 생각이 아닙니다.

또는 총 단락 수를 세고 두 개로 나누고 열을 만드는 Javascript 솔루션을 구현할 수도 있습니다. 이것은 또한 JavaScript를 비활성화 한 사람들을 위해 정상적으로 저하됩니다. 세 번째 옵션은이 모든 분할 작업이 옵션 인 경우 서버 측에서 발생하도록하는 것입니다.

(방법 3 : CSS3 다중 열 레이아웃 모듈)

CSS3 방식에 대해 읽을 수는 있지만 프로덕션 웹 사이트에서는 실제로 실용적이지 않습니다. 적어도 적어도.

다음은 간단한 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>

여기 전문가는 아니지만 이것이 제가 한 일이고 효과가있었습니다

<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의 높이에 도달하면 다른 텍스트는 컨테이너의 오른쪽으로 흐릅니다.

아래에서는 단락을 열화 할 때 정적 및 동적 접근 방식을 모두 만들었습니다. 코드는 거의 자체 문서화되어 있습니다.

앞으로

아래에서 열을 만드는 다음 방법을 찾을 수 있습니다.

정적 (2 열)
JavaScript + CSS (n-columns)가 포함 된 동적
JavaScript + CSS3 (n-columns)가 포함 된 동적

정적 (2 열)

이것은 간단한 2 열 레이아웃입니다. Glennular 의 첫 번째 답변을 기반으로 합니다.

$(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-columns)가 포함 된 동적

이 접근 방식을 사용하면 블록을 열로 변환해야하는지 기본적으로 감지합니다. 형식은 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-columns)가 포함 된 동적

이것은 Glennular 의 두 번째 답변 에서 파생되었습니다 . column-count및 column-gapCSS3 규칙을 사용합니다 .

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

이 솔루션은 두 개의 열로 분할되고 콘텐츠의 절반을 한 줄의 절반으로 나눕니다. 이것은 첫 번째 열에로드되는 데이터로 작업하고 매번 균등하게 흐르기를 원하는 경우에 유용합니다. :). 첫 번째 열에 넣은 금액으로 재생할 수 있습니다. 이것은 목록에서도 작동합니다.

즐겨.

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

참고URL : https://stackoverflow.com/questions/3009670/flow-2-columns-of-text-automatically-with-css

'development' 카테고리의 다른 글

별도의 파일에있는 C # 클래스? (0)	2020.11.29
명령 줄에서 스크립트를 실행하는 '보안 경고'무시 (0)	2020.11.29
Bower에서 로컬 git 패키지를 등록하는 방법은 무엇입니까? (0)	2020.11.29
iOS에서 Core Location과 Core Motion 프레임 워크의 자기장 값의 차이점은 무엇입니까? (0)	2020.11.29
Maven없이 Eclipse에서 src / main / java 폴더 구조 만들기 (0)	2020.11.29

현재글CSS를 사용하여 2 열 텍스트 자동 흐름

big-blog

CSS를 사용하여 2 열 텍스트 자동 흐름

CSS를 사용하여 2 열 텍스트 자동 흐름

방법 1 : 연속 텍스트가없는 경우 관련없는 단락이 많음 :

방법 2 : 텍스트가 연속적인 경우

(방법 3 : CSS3 다중 열 레이아웃 모듈)

앞으로

정적 (2 열)

JavaScript + CSS (n-columns)가 포함 된 동적

JavaScript + CSS3 (n-columns)가 포함 된 동적

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

CSS를 사용하여 2 열 텍스트 자동 흐름

CSS를 사용하여 2 열 텍스트 자동 흐름

방법 1 : 연속 텍스트가없는 경우 관련없는 단락이 많음 :

방법 2 : 텍스트가 연속적인 경우

(방법 3 : CSS3 다중 열 레이아웃 모듈)

앞으로

정적 (2 열)

JavaScript + CSS (n-columns)가 포함 된 동적

JavaScript + CSS3 (n-columns)가 포함 된 동적

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바