하나의 div에 세 개의 div(왼쪽/가운데/오른쪽)를 정렬하는 방법은 무엇입니까?

Question

다음과 같이 컨테이너 div 내부에 3개의 div를 정렬하고 싶습니다.

[[LEFT] [CENTER] [RIGHT]]

컨테이너 div의 너비는 100%(너비가 설정되지 않음)이며 중간 div는 컨테이너 크기를 조정한 후에도 중간 위치에 유지되어야 합니다.

그래서 다음과 같이 설정했습니다.

<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] ]
                              [오른쪽]

제안사항이 있으신가요?

Answer 1

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에 대해 자세히 알아보기:

• Flex 항목 정렬 방법
• CSS 플렉스박스 사용 ~ MDN
• Flexbox 전체 가이드 ~ CSS-Tricks
• Flexbox란 무엇인가요? ! ~ YouTube 동영상 튜토리얼

---

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

Answer 2

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

으아아아

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

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