하나의 div에 세 개의 div(왼쪽/가운데/오른쪽)를 정렬하는 방법은 무엇입니까?
P粉092778585
2023-08-21 15:09:18
<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Flexbox를 사용하여 3개의 div를 가로로 정렬
이것은 다른 div 내의 div를 가로로 정렬하는 CSS3 방식입니다.
jsFiddle
justify-content 속성에는 5개의 값이 있습니다.
모든 경우에 세 개의 div는 같은 줄에 있습니다. 각 값에 대한 설명은 https://stackoverflow.com/a/33856609/3597276
을 참조하세요.Flexbox의 이점:
Flexbox에 대해 자세히 알아보기:
브라우저 지원: Flexbox는 IE < 10을 제외한 모든 주요 브라우저에서 지원됩니다. Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에는 vendor 접두사가 필요합니다. 접두사를 빠르게 추가하려면 Autoprefixer를 사용하세요. 자세한 내용은 이 답변을 참조하세요.
이 CSS를 사용하여 div를 다음과 같이 배치하세요(float 먼저):
으아아아P.S. 오른쪽을 먼저 띄운 다음 왼쪽, 가운데를 띄울 수도 있습니다. 플로팅 콘텐츠가 "기본" 중앙 섹션 앞에 오는 것이 중요합니다.
참고: 일반적으로 양쪽의 내용물이 바닥으로 넘치지 않도록
#container中的最后加入这段代码：<div style="clear:both;"></div>，它会使#container的高度垂直延伸，以容纳两侧的浮动内容，而不仅仅是从#center높이에 배치하는 것이 좋습니다.