컨테이너 div에 대한 CSS 및 다음 라인에 떨어지는

Question

나는 디자이너보다 프로그래머가 더 많고 포용하려고 노력하고 있습니다. <div>테이블을 사용하는 것이 아니라 갇히고 있습니다.

여기 내가하려는 일이 있습니다. 설문 조사 페이지를 설정하고 있습니다. 나는 각 질문의 텍스트가 블루 디브의 맨 위에 앉아 너무 길면 포장하기를 원합니다. 나는 컨테이너 div의 오른쪽 상단에 모든 Red Divs가 줄을 서기를 원합니다.

레이아웃 http://img528.imageshack.us/img528/4330/divsforsurveyop2.jpg

여기에 내가 시작한 내용은 다음과 같습니다. 프레임의 너비가 420 픽셀 이상인 한 잘 작동합니다. 그런 다음 Red 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

여기에 내가 할 일이 있습니다.

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

CSS와 함께 :

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

PS 패딩 값은 0이 아닌 한 항상 단위가 있어야합니다.

Answer 2

빨간 용기 외에는 아무것도 떠 다니지 말고 오른쪽에 띄우지 마십시오. 빨간 컨테이너의 HTML이 파란색 컨테이너의 HTML 앞에 배치되어 있는지 확인하십시오. 파란색 용기에 정적 너비를 유지하고 녹색 용기에 둘 다 명확하게 유지하십시오.

Answer 3

Clear를 사용하지 마십시오 : Bluecontainer의 둘 다 양쪽의 모든 요소 (왼쪽 및 오른쪽)를 제거하기 때문입니다. 그리고 RedContainer를 오른쪽으로 부유하게 만들어야합니다.

Answer 4

당신은 "Clear : 둘 다"푸른 div에 있습니다. 그것이 제가 생각하는 것이 문제를 일으키는 것입니다.

보다 http://www.barelyfitz.com/screencast/html-training/css/position/ 편리한 시연이있었습니다.

Answer 5

여기서는 거의 테스트가 거의 없지만 i 생각한다 당신은 "Clear : 둘 다"를 원할 것입니다. "float : left"대신 GreenconTainer. 또한 .Bluecontainer에서 "Clear : 둘 다"를 제거하십시오

자세한 내용은 다음을 참조하십시오. http://www.quirksmode.org/css/clearing.html

Answer 6

나는 당신이 녹색 용기를 포함하는 div이기 때문에 전혀 떠 다닐 필요는 없다고 생각합니다. 또한, "Clear : 두 가지"진술은 동일한 녹색 용기에 여러 개의 파란색/빨간색 div를 넣는 경우에만 필요합니다.

노력하다

.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; 
}

또한 파란색 컨테이너에 오른쪽 여백을 추가하거나 왼쪽 마진을 빨간 컨테이너에 추가하여 주변 주위의 간격과 관련된 패딩을 사용하는 대신 일관된 간격을 가져야 할 수도 있습니다.