• Q&A
  • 회원가입
  • 로그인

[column] CSS - columns 속성 - (컬럼최소너비/컬럼개수 지정)

columns 예제

 

<style> 

.hz1 {

  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */

  -moz-columns: 100px 3; /* Firefox */

  columns: 100px 3;

}

.hz2 {

  -webkit-columns: 50px 4; /* Chrome, Safari, Opera */

  -moz-columns: 50px 4; /* Firefox */

  columns: 50px 4;

}

</style>


<h2>컬럼최소너비:100px, 가로3개</h2>

<div class="hz1">

<p>홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리</p>

</div>


<h2>컬럼최소너비:50px, 가로4개</h2>

<div class="hz2">

<p>홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리 홈짱닷컴 Homzzang.com 홈페이지 제작관리 서버관리</p>

</div>


결과보기

 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012