CSS에 많은 DIV를 배치하는 방법

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

  •  06-07-2019
  •  | 
  •  

문제

나는 CSS를 배우기 위해 W3Schooles에 대한 긴 튜토리얼을 살펴 보았습니다. 나는 몇 가지 기본 사항을 배웠지 만 여전히 나의 주요 목표를 놓치고있다 : Positioning divs

이것이 제가하려는 일입니다

*---------*---------*
*         *         *
*         *         *
*---------*---------*

내 목표는 일부 사람들에게는 간단하고 사소하지만, 나는 이것을하는 두통이 있습니다. 올바른 방법, 사실 나는 그것을했지만 div에 더 많은 텍스트를 추가하거나 단순히 다른 div와 병합 될 때 많은 문제가 있습니다.

내가 한 일은 단순히 Firebug를 사용하여 마진과 패딩 값을 가지고 노는 것입니다. 지금 필요한 것은이 간단한 (희망) 트릭을 배우는 것입니다. 내가 놓친 것은 다음과 같습니다.이 간단한 포지셔닝은 어떻게 작동합니까? 절대적, 상대적 위치를 사용해야합니까? 마진, 패딩, 크기를 변경합니까 ??

이 점을 설명하는 좋은 튜토리얼이 있다면 지적하십시오. Google에서 다른 두통이있었습니다.

도움이 되었습니까?

해결책

서로 옆에 두 개의 열을 떠 다니는 것처럼 보입니다. 이것은 상당히 단순하고 깊이있는 깊이입니다.

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

나는 멀리 떨어져있는 경향이있다 위치 일부 요소를 오버레이하지 않으면 속성.

다른 팁

CSS에서 2 열 레이아웃 생성

개인적으로, 나는 BR 태그에서 분명한 것을 사용하는 것을 좋아하지 않습니다.

사용 오버플로 : 자동 대신 부모 div에서

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

나는 행운을 빕니다. 960 그리드 시스템.

그만큼 올바른 방법 많은 것들이 실제로 크로스 브라우저 호환되지 않기 때문에 어렵습니다. 브라우저가 좋아지고 있지만, IE와 호환되는 것을 사용해야한다면 여전히 악몽입니다. (많은 해킹)

절대 포지셔닝을 사용하면 DIV를 절대적으로 배치 할 수 있습니다. 단점은 페이지를 표시하는 창의 해상도 또는 크기에 관계없이 해당 위치에 갇혀 있다는 것입니다.

당신이 할 수있는 일은 왼쪽 열을 왼쪽에 뜬 다음 오른쪽 열에 떠 다니는 것을 지정하지 않습니다. 절대 또는 상대를 지정하지 않음으로써 기본 위치를 유지 한 다음 필요에 따라 요소의 너비를 조정하십시오.

DIV에 특정 너비를 설정해도 괜찮다면 다음은 나에게 잘 작동했습니다.

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

"float : left"는 열을 나란히 정렬하게 만듭니다. 마지막 div (Clear : 둘 다)는 열이 열 아래에있는 후에 넣는 모든 것을 만들 수 있습니다. 이렇게하면 다른 스타일의 스타일을 엉망으로 만들지 않고 열의 너비를 변경할 수 있습니다.

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top