찾다

집  >  Q&A  >  본문

HTML에서 세 개의 div를 가로 위치로 지정하는 방법은 무엇입니까?

<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粉419164700P粉419164700541일 전598

모든 응답(2)나는 대답할 것이다

  • P粉478445671

    P粉4784456712023-08-22 13:51:31

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

    으아아아 으아아아

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

    회신하다
    0
  • P粉842215006

    P粉8422150062023-08-22 11:58:42

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

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

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

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

    으아악

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

    회신하다
    0
  • 취소회신하다