CSS box-lines 속성을 사용하는 방법
May 29, 2019 pm 02:28 PMcss box-lines 속성은 열이 상위 상자의 공백을 초과하는 경우 새 줄에 표시되어야 하는지 여부를 지정하는 데 사용됩니다. 해당 구문은 box-lines: 단일|다중입니다.
CSS box-lines 속성을 사용하는 방법은 무엇입니까?
Function: 열이 상위 상자의 공간을 초과하는 경우 새 줄에 표시되어야 하는지 여부를 지정합니다.
구문:
box-lines: single|multiple;
설명: Single의 모든 하위 요소는 별도의 행이나 열에 배치됩니다. (일치하지 않는 요소는 오버플로로 간주됩니다.) 다중을 사용하면 상자가 모든 하위 요소를 수용할 수 있도록 여러 줄로 확장될 수 있습니다.
참고: 기본적으로 가로 상자는 하위 항목을 별도의 행에 정렬하고 세로 상자는 하위 항목을 별도의 열에 정렬합니다.
css box-lines 속성 사용 예
<!DOCTYPE html>
<html>
<head>
<style>
.container
{
width:300px;
border:1px dotted black;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-lines:multiple;
/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
.box
{
width:100px;
/* Firefox */
-moz-box-flex: 1.0;
/* Safari and Chrome */
-webkit-box-flex: 1.0;
/* W3C */
box-flex: 1.0;
}
</style>
</head>
<body>
<div class="container">
<div class="box">11111111111</div>
<div class="box">22222222222</div>
<div class="box">33333333333</div>
<div class="box">44444444444</div>
</div>
<p><b>注释：</b>目前没有浏览器支持 box-lines 属性。</p>
</body>
</html>효과 출력:
#🎜🎜 #
위 내용은 CSS box-lines 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
인기 기사
인기 기사
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7121
9
1534
14
1256
25
1205
29
1153
46
React Reconciliation 알고리즘은 어떻게 작동합니까?
Mar 18, 2025 pm 01:58 PM
React Reconciliation 알고리즘은 어떻게 작동합니까?
useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까?
Mar 19, 2025 pm 03:58 PM
useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까?
카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까?
Mar 18, 2025 pm 01:45 PM
카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까?
JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까?
Mar 18, 2025 pm 01:44 PM
JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까?
React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까?
Mar 18, 2025 pm 01:57 PM
React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까?
usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까?
Mar 19, 2025 pm 03:59 PM
usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까?
