CSS에서 상자를 나란히 표시하는 방법-CSS 튜토리얼-php.cn

CSS에서 상자를 나란히 표시하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-05 16:10:39

원래의

19975명이 탐색했습니다.

상자를 나란히 표시하는 방법: 1. 나란히 표시를 설정하려면 float 속성을 사용하세요. div에 "float:right|left;"를 설정하면 됩니다. by-side 표시. "display:"를 div에 설정하면 됩니다.

CSS에서 상자를 나란히 표시하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

효과를 확인하기 위해 먼저 CSS 스타일을 설정하지 않고 세 개의 div 상자 개체를 설정해 보겠습니다. 코드는 다음과 같습니다.

<body>
    <div>第一个盒子</div>
    <div>第二个盒子</div>
    <div>第三个盒子</div>
</body>

로그인 후 복사

CSS에서 상자를 나란히 표시하는 방법

div 상자 자체의 기본 스타일 속성은 독점 라인을 차지하는 것입니다. 일반적으로 p가 독점 라인을 차지하는 문제를 해결하는 방법은 두 가지입니다. , 다른 하나는 표시 스타일을 설정하는 것입니다. 다음으로는 p박스 객체가 나란히 배열되어 나란히 표시되는 문제를 기사+사진+사례를 통해 해결하는 방법을 소개하겠습니다.

1. 병렬 표시에 CSS 부동소수점 사용

div에 부동소수점 속성을 설정하여 병렬 표시 문제를 해결할 수 있습니다. - 측면 p 상자는 가장 바깥쪽 상자의 너비보다 작거나 같습니다 , 여러 p 개체가 나란히 표시되도록 할 수 있습니다.
Note: ①float 속성을 설정합니다. ②나란한 전체 너비는 외부 레이어의 너비보다 작습니다.

<style>
div{
    border: 1px solid #000;
    float:left;
}
</style>

로그인 후 복사

CSS에서 상자를 나란히 표시하는 방법

여기서 div에 대한 부동 소수점을 설정합니다. 물론 실제 사용 시 div 개체를 행에 표시하기 위해 CSS 클래스를 추가하려면 CSS 선택기가 표시되도록 부동 소수점을 설정합니다. 병렬로. 플로팅 스타일에 다른 불필요한 설정이 추가되지 않도록 하세요.

2. CSS 디스플레이를 사용하여 div 상자 개체를 나란히 표시합니다.

div 상자 개체를 나란히 표시하려면 display:inline을 추가하여 문제를 해결할 수 있습니다.

div{display:inline} 스타일을 div 태그로 설정합니다. 문제 해결 후 스크린샷:

<style>
div{
    border: 1px solid #000;
    display: inline;
}
</style>

로그인 후 복사

CSS에서 상자를 나란히 표시하는 방법

추천 학습: css 비디오 튜토리얼

위 내용은 CSS에서 상자를 나란히 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!