CSS에서 div를 배치하는 가장 좋은 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/61155

  •  09-06-2019
  •  | 
  •  

문제

이 메뉴를 배치하려고 합니다.

<div class="left-menu" style="left: 123px; top: 355px">  
    <ul>  
        <li> Categories </li>  
        <li> Weapons </li>  
        <li> Armor </li>  
        <li> Manuals </li>  
        <li> Sustenance </li>  
        <li> Test </li>  
    </ul>  
</div>

페이지의 왼쪽에 있습니다.문제는 절대 값이나 고정 값을 사용하는 경우입니다.
화면 크기에 따라 탐색 표시줄이 다르게 렌더링됩니다.또한 오른쪽으로 이동해야 하는 모든 기본 콘텐츠가 포함된 두 번째 div도 있습니다. 지금까지는 화면 크기에 관계없이 작동하는 것으로 보이는 상대 값을 사용하고 있습니다.

도움이 되었습니까?

해결책

float 실제로 이를 달성하는 데 적합한 속성입니다.그러나 bmatthews68의 예는 개선될 수 있습니다.플로팅 박스의 가장 중요한 점은 ~ 해야 하다 명시적인 너비를 지정합니다.이는 다소 불편할 수 있지만 이것이 CSS가 작동하는 방식입니다.그러나 px HTML/CSS 세계에서는 적어도 너비를 지정하지 않는 측정 단위입니다.

항상 다양한 글꼴 크기에 적합한 조치를 취하십시오.둘 중 하나를 사용 em 또는 %.이제 메뉴가 플로팅 바디로 구현된다면 이는 메인 콘텐츠가 메뉴 '주위에' 떠 있다는 뜻입니다.기본 콘텐츠가 메뉴보다 높은 경우 원하는 내용이 아닐 수도 있습니다.

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>

기본 콘텐츠에 margin-left 메뉴 너비와 같습니다.

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>

대부분의 경우 주요 콘텐츠에 padding-left 그래서 메뉴에 너무 밀접하게 "붙지" 않습니다.

그런데 메뉴가 왼쪽이 아닌 오른쪽에 있도록 위의 내용을 변경하는 것은 간단합니다.단순히 "왼쪽"이라는 단어가 나오는 모든 것을 "오른쪽"으로 변경하면 됩니다.

아, 마지막으로 한 가지만요.메뉴의 콘텐츠가 기본 콘텐츠보다 높으면 이상하게 렌더링됩니다. float 이상한 일을 합니다.이 경우 bmatthews68의 예에서처럼 부동 몸체 아래에 있는 상자를 지워야 합니다.

/편집하다:젠장, HTML은 미리보기에 표시된 대로 작동하지 않습니다.음, 대신 사진을 포함시켰습니다.

다른 팁

내 생각에 당신은 뜨다 그런 것들을 배치하는 속성입니다. 여기에서 이에 대해 읽을 수 있습니다.

명시적인 너비와 함께 부동 소수점을 사용하라는 모든 답변이 정확합니다.하지만 원래 질문에 대답하려면, 위치를 지정하는 가장 좋은 방법은 무엇입니까? <div>?때에 따라 다르지.

CSS는 상황에 따라 다르며 페이지의 흐름은 HTML의 구조에 따라 달라집니다.일반 흐름은 요소와 해당 하위 요소가 포함 블록(일반적으로 상위 요소) 내에서 위에서 아래로(블록 요소의 경우), 왼쪽에서 오른쪽으로(인라인 요소의 경우) 레이아웃되는 방식입니다.이것이 대부분의 레이아웃이 작동하는 방식입니다.당신은 의존하는 경향이 있습니다 width, margin, 그리고 padding 주변의 다른 요소에 대한 요소의 간격과 레이아웃을 정의합니다. <div>, <ul>, <p>, 또는 그렇지 않은 경우 HTML은 이 시점에서 대부분 의미론적입니다.

다음과 같은 스타일을 사용하여 float 또는 absolute 또는 relative 위치 지정은 레이아웃의 매우 구체적인 목표를 달성하는 데 도움이 될 수 있지만 사용 방법을 아는 것이 중요합니다.설명했듯이, float 일반적으로 블록 요소를 서로 옆에 배치하는 데 사용되며 다중 열 레이아웃에 정말 좋습니다.

여기서는 더 자세히 다루지는 않겠지만 다음 사항을 확인해 보세요.

원하는 효과를 얻으려면 float 및clear CSS 속성을 사용해야 합니다.

먼저 레이아웃의 두 열에 대해 왼쪽 및 오른쪽이라는 스타일을 정의하고 페이지 흐름을 재설정하는 데 사용되는 Clearer라는 스타일을 정의했습니다.

<style type="text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

그런 다음 이를 사용하여 페이지를 레이아웃합니다.

<div>
 <div class="left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class="right">
   Blah Blah Blah....
 </div>
</div>
<div class="clear" />

당신은 플로트를 사용할 수 있습니다

<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>

CSS 파일에서

.left-menu{float:left;width:200px;}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top