2009-11-21 3 views
0

이 코드에서 올바른 방법으로 (효율적으로) 수레를 사용하고 있는지 알고 싶습니다.플로트의 올바른 사용법 (CSS 표준을 좋아하는 사람들을 위해)?

기본적으로 3 개의 열 (각각 왼쪽, 왼쪽 및 오른쪽으로 플로트가 있음)이 있습니다. 너무 많은 수레를 사용하고 있습니까? 열을 추가하거나 삭제하면 문제가 발생합니까?

이 내 index.html을이다 : 나는 명확 추가

#navigation { 
font-family: Trebuchet MS; 
font-weight: bold; 
color: #FFF; 
width: 900px; 
background-color: #000; 
overflow: hidden; 
} 

#left-column { 
margin: 10px 10px 0 0; 
width: 150px; 
padding: 10px; 
float: left; 
color: #FFF; 
background-color: #A53030; 
} 

#main-column { 
width:410px; 
padding: 10px; 
float: left; 
} 

#right-column { 
width: 260px; 
padding: 10px; 
float: right; 
} 

#footer { 
margin-top: 10px; 
padding: 5px; 
width: 900px; 
border-color: #262626; 
border-top-style: solid; 
border-width: medium; 
clear: both; 
} 

: 모두 바닥 글에 내가 본 적이 있기 때문에 내 있는 style.css가

<div id="content"> 
    <div id="left-column"> 
     <h2>left-column</h2> 
     <p> 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     </p> 
    </div> 
    <div id="main-column"> 
     <h2>main-column</h2> 
     <p> 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     </p> 
    </div> 
    <div id="right-column"> 
     <h2>right-column</h2> 
     <p> 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     </p> 
    </div> 
</div> 

입니다 많은 웹 페이지에서 나는 그것을 삭제하면 아무 일도 일어나지 않기 때문에 왜 거기에 있는지 확신 할 수 없습니다.

답변

2

당신이 올바르게하고 있습니다.

clearing your floats the "Correct Way"™이기 때문에 바닥 글에 clear: both이 필요하지 않습니다. 기본적으로 오버플로를 숨김으로 설정하면 바닥 글에서 수레를 지울 필요가 없습니다. 그것을 유지해서 아무 것도 다치게해서는 안되지만 바닥 글 스타일 규칙에서 clear: both을 꺼내겠습니다. 필요하지 않습니다.

0

정확하게 사용하는 방법입니다. clear 정의는 "floating"요소 아래에 다른 부동 콘텐츠가 배치된다는 것을 의미합니다. Dan이 언급했듯이 거기에는 필요하지 않지만 CSS 레이아웃을 플로팅 (floating) 할 경우, 그것이 무엇을하는지 이해하는 것이 중요합니다.

0

아마도 모두 float : left를 사용해야합니다. 그런 다음 내용을 3 개의 열 아래에 표시하려면 clear : left를 사용하면됩니다.

관련 문제