집 > 기사 > 웹 프론트엔드 > CSS3의 새로운 속성: CSS3 다중 열 레이아웃 속성 요약(예제 포함)

CSS3의 새로운 속성: CSS3 다중 열 레이아웃 속성 요약(예제 포함)

不言원래의: 2018-08-04 16:08:383635검색

css3에 다중 열 레이아웃 속성이 추가되었습니다. 다중 열 레이아웃이란 무엇입니까? 소위 다중 열 레이아웃은 신문의 레이아웃과 유사하게 여러 열을 만들어 텍스트를 배치하는 것입니다. 따라서 이 기사에서는 다중 열 레이아웃의 몇 가지 관련 속성과 코드 예제를 살펴보겠습니다.

CSS3 다중 열 레이아웃 컨테이너 속성:

column-width: auto | 🎜#열의 최소 너비(min-width)를 정의합니다.

auto: 열 너비는 다른 요소에 의해 결정됩니다.

length: 최소 너비를 명시적으로 설정합니다.

column-count: auto | : 열 수를 정의합니다.

auto: 요소 열이 하나만 있습니다. 설정이 없는거같은데

: 양의 정수 값입니다. 값은 0보다 큰 정수이며, 음수 값은 유효하지 않습니다.

columns: || : 열 너비와 열 개수의 약어입니다. 모든 주문.

열 너비 = (상위 요소 너비 - (열 번호-1) 열 간격) / 열 번호*

예: 상위 요소는 40em이고 4개의 열로 나뉘며 열은 간격은 2em입니다. 그러면 열 너비는 (40 - (4-1) * 2) / 4 = 8.5em입니다.
명시적으로 설정된 열 너비가 이 너비보다 작을 경우 이 너비로 표시됩니다.
명시적으로 설정된 열 너비가 이 너비보다 큰 경우 적절한 크기에 따라 열 너비와 열 수를 다시 정렬합니다. 현재 설정된 열 너비와 열 수가 정확하지 않습니다.

column-gap: 일반 | : 열 간격을 정의합니다. 값이 너무 크면 레이아웃이 깨집니다.

normal: 브라우저에 의해 구문 분석되는 기본값, 일반적으로 lem입니다.

: 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다. 예: 2.1em.

column-rule: : 열 테두리를 정의합니다.

중심선은 항상 열 간격의 중심선과 동일합니다. 즉, 항상 두 열의 중간에 있습니다. 국경과 유사합니다. 열 테두리가 열 간격보다 크면 자동으로 사라지지 않습니다. 열 간격을 벗어나 확장되는 열 테두리 부분은 텍스트 아래로 가라앉는 것처럼 보입니다(배경 효과).

column-fill: auto | Balance: 여러 열의 각 열 높이가 균일한지 여부를 정의합니다.

이 속성은 매우 이상합니다. 그리고 브라우저마다 동일하지 않습니다. 두 가지 값이 있습니다: 자동 | 균형. 존재하다 ie10/ie11/opera40/chrome52에서 테스트한 결과는 모두 동일하며, 두 속성에는 차이가 없는 것으로 확인되었습니다. Firefox 49에서 테스트할 때 이 두 속성 사이에는 차이가 있습니다. 균형은 각 열의 높이가 거의 동일(정렬)된다는 것을 의미하며, 자동은 설정한 열 수에 관계없이 자동으로 하나의 열로 병합합니다.

css3 다중 열 레이아웃 항목(요소) 속성:

column-span: 없음 | all : 요소가 확장되는 열 수를 정의합니다.

모든 열에 제목을 넣는 경우가 많습니다. 그런 다음 열 범위: 모두. 기본값은 column-span: none입니다. 이는 열 범위가 없음을 나타냅니다.

css3 다중 열 레이아웃 코드:

     nbsp;html>
    
    
        <meta>
        <meta>
        <meta>
        <title>多列布局｜column-span</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper {  
            width: 40em;
            margin:0 auto;
            border: 1px solid #ccc;
            /*多列布局*/
            -moz-column-count: 4;
            -webkit-column-count: 4;
            column-count: 4;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -moz-column-rule: .1em dashed #ccc;
            -webkit-column-rule: .1em dashed #ccc;
            column-rule: .1em dashed #ccc;
            -webkig-column-fill: balance;
            -moz-column-fill: balance;
            column-fill: balance;
        }
        h1 {
            font-size: 1.5em;
            margin-bottom: 1em;
            -moz-column-span: all;
            -webkit-column-span: all;
            column-span: all;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        p {
            margin-bottom: 1em;
            text-indent: 2em;
            line-height: 1.625;
            font-size: .7em;
        }
    </style>


    <div>
        <h1>为什么您宁愿吃生活的苦，也不愿吃学习的苦？</h1>
      <h3>一. 为什么大多数人宁愿吃生活的苦，也不愿吃学习的苦？</h3>
        <p>记得小时候上学，学校每次放月假，爷爷就去车站接我回家。
那时家里离车站远，需要骑着车子来回。
一路上我们彼此相对无语，等到爷爷骑不动了，我们就这么一前一后推着车子走着，记得爷爷常常和我说：
“吃得苦中苦，方为人上人，你日后要好生读书。”
那时的我未解其意，只是默默记在心里，望着不远处稻田里的乡亲们弯腰割麦俯首插秧，我觉着他们太辛苦了。
几年过去了，我考入了省城上大学，学了这个城市最热门也最富前景的工程造价专业。
后来，我走进实习单位， 工地的环境有多么糟糕自不必多说，晴天尘土飞扬骄阳似火，雨天泥泞不堪污水四溢。
物质世界的贫瘠尚可以忍受，然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。
后来，我选择去了深圳，在那里我终于找到了自己热爱的行业，眼前陌生的一切都让我感到兴奋和欢愉。
人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。
越是不断地拓宽知识面，越是觉得自己知识储备量的贫瘠与荒凉。</p>
        <h3>二. 生活的痛苦使人麻痹，学习的痛苦让人清醒 ；过去不按思维而生活，终将有一天要按照生活而思维</h3>
        <p>痛苦之所以不被人喜欢，大多数是因为人们从不会思考自己为何痛苦。
然而，这世上还有另一种痛苦是，对这个世界产生了失望的情绪，然后把自己对这个世界的失望，当作是自己本该如此，甚至误以为这就是吃苦的好处。
我总觉得苦难的意义，在于我们更好地去思考人生为何如此苦难，就像有人曾说：未经省察的人生，从不值得一过。
如果没有经过思索和自省，苦难终究只是苦难而已，没有任何意义。
有些人，年轻时总觉得学不学习无关紧要，反正自己体力好得很，只要自己身体好就能混口饭吃。
他们终将会明白，那些为了讨生活不得已而吃的苦，就是当年不吃学习苦的代价。
学习的苦，是枯燥的苦，是短期没有回报的苦，这种苦看得见，摸得着，谁都不愿吃。
生活的苦，是绝望的苦，是长期没有出路的苦，这种苦看不见，摸不着，谁都不想吃。
我从不喜欢自讨苦吃，如果我能通过学习和自我提升避免遇见这些痛苦的经历，我有什么理由不去学习？
生活其实并不苦，苦的是那个不知苦也不知如何避免吃苦的人生。
学习其实并不苦，苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p>
    </div>

실행 효과:

CSS3의 새로운 속성: CSS3 다중 열 레이아웃 속성 요약(예제 포함)

CSS3의 새로운 속성: CSS3 다중 열 레이아웃 속성 요약(예제 포함)

관련 기사