2010-03-01 3 views
0

Block3을 Block2 아래로 이동하지 않는 방법을 아는 사람이 있습니까? 나는 BLOCK3는 블록 1에서 보여 드리고자 및 블록 4는 감사 블록 (3)CSS 디스플레이 : 인라인; float : 왼쪽이지만 div 블록은 다른 블록과 가까이 있지 않습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional --> 
    <title>Test</title> 

    <style type="text/css">  
     /* in the style below the width and border and margin must not be modified */ 
     div.float_box {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px;} 
     p.clear {clear: both; height: 0px;} 
    </style> 

</head><body> 

    <!-- This outside div must not be touched or modified --> 
    <div style="width: 300px; padding: 10px; border: 1px dashed #cccccc;"> 
     <!-- Blocks' height must not be modified by adding contents or setting styles --> 
     <div class="float_box">Block 1<br><br><br><br><br></div> 
     <div class="float_box">Block 2<br><br></div> 
     <div class="float_box">Block 3<br><br><br><br><br><br><br><br></div> 
     <div class="float_box">Block 4<br><br></div> 
     <p class="clear"></p> 
    </div> 

</body></html> 

오른쪽에 갈 것!

이것은 분명히 단지 예일 뿐이지 만, 나는 블록의 길이에서 우연히 그리고 블록의 수에서 우연히 작동하는 해결책이 필요하다. 누군가가 블록 3에서 "clear : both"를 사용하도록 제안했으나이 경우 만 해결할 수 있습니다. 다른 블록 5가 같은 높이이거나 블록 3보다 길고 다른 블록 6 이후에 있으면 문제는 다시 일어나서 그것을 고치려면 블록 5에서 모두 수동으로 설정해야합니다. 미리 길이와 블록 수를 알지 못하기 때문에 일반적인 솔루션이 필요합니다. DB에서 동적으로 생성 된 블록 수입니다. 외부 DIV 300 픽셀 상자에 피팅 동안

내 모든 블록 (I 설정 10xp 여백에 의해 간단하게 분리) 다른 하나 개 가까이 displaied 할보고 싶습니다. 300px의 otside div 상자는 확장 할 수 있고 내부 블록은 새 크기 (예 : 3/4 열로 맞추기)로 적응하는의 위치를 ​​변경해야합니다.

+0

처음에는 블록을 동적으로 생성한다는 점과 블록 수가 다를 수 있다는 점을보다 구체적으로 설명해야합니다. – Harv

답변

2

당신의 정의와, 블록 3 DIV에 (? "분명히") 다른 클래스를 추가 할 수 있어야한다 : 당신이 처음에 예상대로

물론
div.clear { clear:both; } 

는, CSS는 항상 작동하지 않습니다. (: 왼쪽 분명히 추가) 그리고 당신이 찾고 있던 결과를 제공합니다 ..

+0

하지만이 경우에만 문제가 해결 될 것이므로 일반적인 솔루션이 필요합니다. –

0

나는이에 BLOCK3 클래스를 변경했습니다.

div.block3 {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px; clear:left;} 

편집 :이 이후 지금 인해 솔루션이 실행시에 생성 한 후 추가해야합니다 블록의 총 수를 카운트하는 질문의 설명에 동적으로 생성 된 시나리오로 알려져있다 적절한 경우 clear 속성. HTML을 생성하기 전에 얼마나 많은 상자가 있는지 알 수 없다면 레이아웃 작업을 할 수있는 방법이 없습니다.

예를 들어

당신이 그때 당신은 확실히 그들이 (두 개의 열 솔루션의 경우) 자신의 왼쪽 이웃을 취소 할 상자 3, 5에 명확한 속성을 추가 할 것입니다 다섯 개 블록이있는 경우.

상자를 확장 한 다음 다른 문제를 가지고 서너 열 레이아웃을 변경할 수 있다면

. 열을 배치하려는 경우 고정 레이아웃과 확장 레이아웃을 모두 가질 수 없습니다.

+0

하지만이 경우에만이 문제를 해결할 수 있습니다. 일반적인 솔루션이 필요합니다. –