HTML에서 세 개의 div를 가로 위치로 지정하는 방법은 무엇입니까?
P粉419164700
2023-08-21 19:20:03
<p>세 개의 수평 파티션이 있는 샘플 웹사이트를 만들고 있습니다.
가장 왼쪽 파티션의 너비는 25%, 중간 파티션의 너비는 50%, 오른쪽 파티션의 너비는 25%로 하여 파티션이 수평으로 공간을 100% 채울 수 있도록 하고 싶습니다. </p>
<pre class="brush:php;toolbar:false;"><html>
<제목>
웹사이트 제목
</제목>
<div id="전체" style="높이:100%; 너비:100%" >
<div id="leftThing" 스타일="위치: 상대; 너비:25%; 배경색:파란색;">
왼쪽 메뉴
</div>
<div id="content" 스타일="위치: 상대; 너비:50%; 배경색:녹색;">
무작위 콘텐츠
</div>
<div id="rightThing" 스타일="위치: 상대; 너비:25%; 배경색:노란색;">
오른쪽 메뉴
</div>
</div>
</html></pre>
<p>https://i.stack.imgur.com/NZDJe.jpg</p>
<p>이 코드를 실행하면 div가 겹쳐서 나타납니다. 나란히 나타나길 바라요! </p>
<p>어떻게 해야 하나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
아주 오래된 질문이라는 걸 알아요. 저는 FlexBox를 사용하여 여기에 이 문제에 대한 해결책을 게시하고 있습니다. 해결책은 다음과 같습니다.
컨테이너에
display:flex만 추가하면 됩니다! 수레를 사용할 필요가 없습니다.이 상황을 처리하기 위해 부동 소수점을 사용하는 것을 권장하지 않으며
inline-block을 사용하는 것을 선호합니다.고려해야 할 몇 가지 추가 사항:
<head>和<body>doctype문서 형식을 지정하는 더 좋은 방법은 다음과 같습니다.
으아악여기에는 참고용 jsFiddle도 있습니다.