컨테이너 div를위한 CSS와 다음 줄로 넘어 가기

Question

저는 디자이너가 아닌 프로그래머입니다. 나는 테이블을 사용하기보다는 <div>을 수용하려하지만 막히고 있습니다.

다음은 내가하려는 일입니다. 설문 조사 페이지를 준비 중입니다. 각 질문의 텍스트를 파란색 div 상단에 놓고 너무 길면 줄 바꿈을하고 싶습니다. 모든 div가 컨테이너 div의 오른쪽 위 모서리에 정렬되기를 원합니다.

Layout http://img528.imageshack.us/img528/4330/divsforsurveyop2.jpg

여기에, 그것은 너무 오래 프레임 이상 420 개 픽셀 폭으로 잘 작동 제가 시작했습니다입니다. 그런 다음 빨간색 div가 다음 줄로 건너 뜁니다. 나는 그것이 잘못 접근했을지도 모른다라고 생각한다, 아마 나는 오른쪽에 물건을 뜨고 있어야하다?

.greencontainer{ 
    width:100%; 
    spacing : 10 10 10 10 ; 
    float: left; 
} 

.redcontainer{ 
    float: left; 
    width: 20px; 
    padding: 2 0 2 0; 
    font-size: 11px; 
    font-family: sans-serif; 
    text-align: center; 
} 

.bluecontainer{ 
    clear: both; 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10; 
    font-size: 11px; 
    font-family: sans-serif; 
    text-align: left; 
} 

Answer 1

내가 할 것 인 것이다 : CSS로

<div class="greencontainer"> 
    <div class="redcontainer"> 
    <input type="checkbox" /> 
    </div> 
    <div class="bluecontainer"> 
    <label>Text about this checkbox...</label> 
    </div> 
</div> 

: 그들은 영을하지 않는 한

.greencontainer{ 
    float:left; 
    clear:left; 
    width:100%; 
} 
.redcontainer{ 
    float:right; 
    width:20px; 
} 
.bluecontainer{ 
    margin-right:20px; 
} 

PS 패딩 값은 항상 단위를 가져야한다.

Answer 2

여기

거의 테스트,하지만 난 당신이 원하는 것 생각 "명확 : 모두;" 대신에 "float : left"대신 .greencontainer를 사용하십시오. http://www.quirksmode.org/css/clearing.html

Answer 3

명확 사용하지 않는 : 당신의 bluecontainer에 모두가 양쪽 (왼쪽 및 오른쪽)에있는 모든 요소를 ​​삭제하기 때문에

가에서 더 많은 정보를 참조 .bluecontainer에서 : 또한 "모두 분명"제거합니다. redcontainer를 오른쪽으로 띄워야합니다.

Answer 4

빨간색 용기 이외의 물체를 뜨지 말고 오른쪽으로 띄우십시오. 빨간색 컨테이너의 HTML이 파란색 컨테이너의 HTML 앞에 놓여 있는지 확인하십시오. 파란색 컨테이너에 정적 너비를 유지하고 녹색 컨테이너에 둘 다 명확하게하십시오.

Answer 5

파란색 div에는 "clear : both"가 있습니다. 그것이 내가 문제를 일으킨다 고 생각하는 것이다.

몇 가지 편리한 데모가있는 http://www.barelyfitz.com/screencast/html-training/css/positioning/을 확인하십시오. 여기

Answer 6

포함 된 div이므로 녹색 컨테이너를 플로팅 할 필요가 없다고 생각합니다. 또한 동일한 녹색 컨테이너에 파란색/빨간색 div를 여러 개 넣는 경우에만 "clear : both"문이 필요합니다.

또한 오히려 내부의 간격 관련 패딩을 사용하는 것보다 그들 사이의 일관된 간격을 얻기 위해 빨간색 컨테이너에 파란색 용기 또는 왼쪽 여백에 오른쪽 여백을 추가해야 할 수 있습니다

 
.greencontainer{ 
    width:100%; 
spacing : 10 10 10 10 ; 

} 

.bluecontainer{ 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10; 
    font-size: 11px; 
font-family: sans-serif; 
    text-align: left; 
} 
.redcontainer{ 
    float: right; 
    width: 20px; 
    padding: 2 0 2 0; 
    font-size: 11px; 
font-family: sans-serif; 
    text-align: center; 
} 

시도 div 주위에 있지 않습니다.