left float divs issue

Question

부모 div 안에 왼쪽 부동 div에 두 가지 질문이 있습니다. 나는 인터넷에서 검색된이 시도 된 다른 것들에 5 시간 이상을 보냈지 만 해결책을 찾지 못했습니다! 여기 누군가가 도울 수있을 거라 생각 했어.

<div id="parent_div"> 
<div class="left_floating" style="height:20px; width: 100%; clear:left;"><label style="text-align:center"> This is the title div </label></div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div> 
<div class="left_floating" style="height:20px; width:50px;"> 2 </div> 
<div class="left_floating" style="height:20px; width:50px;"> 3 </div> 
</div> 

문제 1 : 내가 원하는 무엇 : 제목이 모든 시간/관계없이 화면의 크기의 다른 세 된 div의 중심이 될

이

는 시나리오입니다. 어떤 일이 벌어 질지 : div의 공간이 충분하지 않은 시점에서 화면의 크기를 줄이면 화면이 아래로 내려갑니다 (이것이 내가 원하는 것입니다). 그러나 오른쪽에 약간의 틈이 남습니다. div 2는 부모 div의 너비를 100px (div 1의 너비 + div 2의 너비)보다 크게 만듭니다. 즉, 부모 div가 측면에서 단단하지 않습니다. 이것은 제목이 중심이 아니게 만든다. 이 문제를 어떻게 해결할 수 있습니까?

문제 2 : 내가 원하는 : DIV 2의 높이가보다 작은 때문에 DIV 3 DIV 2 아래에 간다 : 화면을 축소 및 사업부 3가 다운 될 때, 그것은 무슨 DIV 1. 아래에 가야한다 div 2의 높이가 div 1의 높이보다 큰 경우 결과가 바람직한 결과가됩니다. 어떤 제안?

나는 CSS 솔루션을 원한다.

감사합니다.

Answer 1

미디어 쿼리를 사용하여 원하는 것을 얻을 수 있습니다. 다음은 제공된 마크 업을 사용한 예입니다. http://jsfiddle.net/VQMrY/1/ 내가 작성한 CSS 변경 사항에 유의하십시오. 레이블을 블록 요소로 만들고 미디어 쿼리 (결과를 표시 할 화면 너비에 따라 다름)를 작성하십시오. 요소 주위에 테두리를 넣어서보기가 더 쉽습니다. 또한 부모 컨테이너에 clr 클래스를 추가했습니다.

미디어 쿼리에서 div '2'를 오른쪽으로 떠서 간격을 지정하지 않고 '3'을 선택하여 '1'아래로 떨어지게합니다. 바라기를 이것은 도움이된다!

@media screen and (max-width: 3550px) { 
.second {float: right;} 
.third {clear: both;} 

}

그냥 당신이 발생할 수있는 중단 점을 원하는에 최대 폭을 편집 할 수 있습니다.

Answer 2

관련 문제 1 : 아마 미디어 쿼리를 통해 해결할 수 있습니다. 특정 해상도에서와 같이 들리 겠지만, CSS가 다르게 행동하기를 원합니다. 이는 미디어 쿼리가 좋은 것입니다. 당신은 가능성 문제 2에 관한

@media (max-width: n px) { 
    #parent_div { 
     width: 100px; 
    } 

@media (min-width: n+1 px) { 
    #parent_div { 
     width: 150px; 
    } 

의 라인을 따라 뭔가를 할 것입니다 : 당신은 DIV 2가 그것을 적절하게 DIV 3 수레 너무 큰 정적 높이를 제공하기 위해 포장하는 사업부를 만들 수 있습니다. 래퍼를 왼쪽으로 뜨고 div 2를 뜨지 않게하십시오.

<div id="parent_div"> 
<div class="left_floating" style="height:20px; width: 100%; clear:left;"> 
    <label style="text-align:center"> This is the title div </label> 
</div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div> 
<div style="float:left; height:50px; width:50px;"> 
    <div class="left_floating" style="float:none; height:20px; width:50px;"> 2 </div> 
</div> 
<div class="left_floating" style="height:20px; width:50px;"> 3 </div> 
</div>