简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
HTML에서 세 개의 div를 가로 위치로 지정하는 방법은 무엇입니까?
P粉419164700
P粉419164700 2023-08-21 19:20:03
0
2
519
<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>
P粉419164700
P粉419164700

모든 응답(2)
P粉478445671
P粉4784456712023-08-22 13:51:31 2층

아주 오래된 질문이라는 걸 알아요. 저는 FlexBox를 사용하여 여기에 이 ​​문제에 대한 해결책을 게시하고 있습니다. 해결책은 다음과 같습니다.

으아아아 으아아아

컨테이너에 display:flex만 추가하면 됩니다! 수레를 사용할 필요가 없습니다.

좋다 +0
답글 추가
P粉842215006
P粉8422150062023-08-22 11:58:42 1층

이 상황을 처리하기 위해 부동 소수점을 사용하는 것을 권장하지 않으며 inline-block을 사용하는 것을 선호합니다.

고려해야 할 몇 가지 추가 사항:

  • 인라인 스타일은 유지 관리에 좋지 않습니다
  • 선택기 이름에는 공백이 있어서는 안 됩니다
  • <head>和<body>
    • 과 같은 중요한 HTML 태그를 무시했습니다.
  • 포함하지 않았습니다 doctype

문서 형식을 지정하는 더 좋은 방법은 다음과 같습니다.

으아악

여기에는 참고용 jsFiddle도 있습니다.

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！