3 Column Fluid Div 디스플레이 글리치 : "Hanging"Individual Divs

Question

필자는 3 개의 컬럼이있는 반응성 유체 설계 포트폴리오를 보유하고 있습니다. 문제를 정확히 지적하고있는 CSS에 문제가 있습니다.

행에 정확히 3 개의 항목이 있으면 정상적으로 표시됩니다. 그러나 마지막 항목이 1 열 또는 2 열의 행으로 끝나면 전체 형식이 왜곡됩니다. 이것은 브라우저의 크기를 조정하여 볼 수 있습니다.

이 문제에 대한 CSS 수정을 정확히 알려 주시면 감사하겠습니다.

예제 페이지는 여기에 있습니다 : http://bit.ly/KzfN2g

내가 그러나 내가 잘못 될 수있다,이 문제의 원인입니다 주요 CSS 스타일이라고 생각 :

.mosaic-block-three { 
    margin-right:3%; 
    width:29.3%; 
    background:url("../img/progress.gif") no-repeat scroll center center #F5F5F5; 
    border:1px solid #FFFFFF; 
    box-shadow:0 0 4px 0 #888888; 
    float:left; 
    margin:10px 40px 30px 0; 
    overflow:hidden; 
    position:relative; 
    width:291px; 
} 

Answer 1

내가 할 수 있었다 간단한 jQuery를 사용하여 페이지로드시 이미지의 높이를 가져오고 CSS에서 높이를 선언 한 다음 윈도우에서 이미지 높이를 가져 와서 CSS로 다시 채 웁니다.

$ j (document) .ready (function() {

// Set portfolio image item height after images load, 

     $j(".mosaic-backdrop img").load(function(){ 
     var portfolioItemHeight = $j(".mosaic-backdrop img").height(); 
     $j(".portfolio-three-item").css("height", portfolioItemHeight); 
     }); 
// reset portfolio image item height each time window is maximized 

     if(screen.width > 1200) { 
      $j(".mosaic-backdrop img").load(function(){ 
      var portfolioItemHeight = $j(".mosaic-backdrop img").height(); 
      $j(".portfolio-three-item").css("height", portfolioItemHeight); 
      }); 

     } 
// reset portfolio image item height each time window is resized 

     $j(window).resize(function() { 
     var portfolioItemHeightReized = $j(".mosaic-backdrop img").height(); 
     $j(".portfolio-three-item").css("height", portfolioItemHeightReized); 
    }); 

    }); 

높이가 제대로 설정되지 않았다는 것을 알게 해주셔서 감사합니다.

Answer 2

워, 거룩한 등록 상표 배트맨을 ! 내가 당신이라면 :)하지만 손의 질문에 나는

왜 당신은 단지 하나 개의 항목으로 많은 목록을해야합니까 ...

<sup>&reg;</sup> 

을 넣을까요? 당신은 또한 정의되지 않은이 몇 가지 스타일을 가지고,하지만 난 당신의 가장 큰 문제는 당신이 포함 된 요소가없는 동안 떠내려

<li> 

내에서 항목이 있다고 생각합니다.

플로팅 .portfolio-three-item을 플로팅 한 다음 그 안에 내용을 지워보십시오. 지우기 클래스 또는

<br clear="all" /> 

를 사용하지 않고 비 떠 요소 (내부 부유 요소를 갖는 브라우저를 혼동 내용 중 하나가 떠내려해야하는 것처럼은 보이지 않는다.