>  기사  >  웹 프론트엔드  >  CSS3에서 너비가 다른 열을 어떻게 만들 수 있나요?

CSS3에서 너비가 다른 열을 어떻게 만들 수 있나요?

DDD
DDD원래의
2024-10-30 07:39:28629검색

How Can I Create Columns with Different Widths in CSS3?

CSS3에서 다양한 열 너비 지정

CSS3의 다중 열 레이아웃은 다중 열 레이아웃을 생성하는 편리한 방법을 제공하지만 그렇지 않습니다. 다양한 열 너비를 지정할 수 있습니다.

제공된 예에서 한 열은 너비가 20px이고 다른 열은 너비가 80px인 2열 레이아웃이 필요한 경우:

<code class="css"><div style="-webkit-column-count: 2;
            -webkit-column-rule: 1px solid black;
            -webkit-column-width: 80px;
             margin-left:20px;margin-top:20px;">
    <div id="picturebox" style="">picture box</div>
    <div id="nme">name</div>
</div></code>

이것은 다음과 같습니다. 불가능합니다. -webkit-column-width 속성은 모든 열의 너비를 동일하게 설정합니다. 이러한 제한이 적용되는 이유는 다중 열 레이아웃 기능이 동일한 열 사이에 흐르는 콘텐츠를 위해 설계되어 일관되고 균형 잡힌 레이아웃을 유지하기 때문입니다.

따라서 원하는 효과를 얻으려면 다중 열 사용과 같은 대체 접근 방식이 필요합니다. div 또는 float 기술이 더 적합할 수 있습니다.

위 내용은 CSS3에서 너비가 다른 열을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.