하나의 div에 세 개의 div(왼쪽/가운데/오른쪽)를 정렬하는 방법은 무엇입니까?
P粉092778585
P粉092778585 2023-08-21 15:09:18
0
2
373
<p>다음과 같이 컨테이너 div 내부에 3개의 div를 정렬하고 싶습니다. </p> <pre class="brush:php;toolbar:false;">[[LEFT] [CENTER] [RIGHT]]</pre> <p>컨테이너 div의 너비는 100%(너비가 설정되지 않음)이며 중간 div는 컨테이너 크기를 조정한 후에도 중간 위치에 유지되어야 합니다. </p> <p>그래서 다음과 같이 설정했습니다. </p> <pre class="lang-css Prettyprint-override"><code>#container{width:100%;} #왼쪽{float:왼쪽;너비:100px;} #right{float:right;너비:100px;} #center{margin:0 auto;width:100px;} <p>그러나 결과는 다음과 같습니다.</p> <pre class="brush:php;toolbar:false;">[[LEFT] [CENTER] ] [오른쪽]</pre> <p>제안사항이 있으신가요? </p>
P粉092778585
P粉092778585

모든 응답(2)
P粉291886842

Flexbox를 사용하여 3개의 div를 가로로 정렬

이것은 다른 div 내의 div를 가로로 정렬하는 CSS3 방식입니다.

으아악 으아악

jsFiddle

justify-content 속성에는 5개의 값이 있습니다.

  • flex-start (기본값)
  • 플렉스엔드
  • 센터
  • 공간 사이
  • 우주 주변

모든 경우에 세 개의 div는 같은 줄에 있습니다. 각 값에 대한 설명은 https://stackoverflow.com/a/33856609/3597276

을 참조하세요.

Flexbox의 이점:

  1. 코드량이 적고 매우 효율적입니다
  2. 수직 및 수평 센터링이 매우 쉽습니다
  3. 등고선 열은 매우 간단합니다
  4. 플렉스 요소 정렬을 위한 다양한 옵션
  5. 반응형
  6. 플로트 및 테이블과 달리 플로트 및 테이블은 레이아웃을 작성하는 데 사용되지 않기 때문에 레이아웃 기능이 제한되어 있습니다. Flexbox는 다양한 옵션을 갖춘 최신(CSS3) 기술입니다.

Flexbox에 대해 자세히 알아보기:


브라우저 지원: Flexbox는 IE < 10을 제외한 모든 주요 브라우저에서 지원됩니다. Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에는 vendor 접두사가 필요합니다. 접두사를 빠르게 추가하려면 Autoprefixer를 사용하세요. 자세한 내용은 이 답변을 참조하세요.

P粉029057928

이 CSS를 사용하여 div를 다음과 같이 배치하세요(float 먼저):

으아아아

P.S. 오른쪽을 먼저 띄운 다음 왼쪽, 가운데를 띄울 수도 있습니다. 플로팅 콘텐츠가 "기본" 중앙 섹션 앞에 오는 것이 중요합니다.

참고: 일반적으로 양쪽의 내용물이 바닥으로 넘치지 않도록 #container中的最后加入这段代码:<div style="clear:both;"></div>,它会使#container的高度垂直延伸,以容纳两侧的浮动内容,而不仅仅是从#center 높이에 배치하는 것이 좋습니다.

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!