인라인 블록 요소에 충분한 높이가있는 경우 강제 중단 선

가로 내용으로 사이트를 만들고 있습니다. 내 문제는 콘텐츠를 가로로 가져 오려면 콘텐츠에서 인라인 블록을 사용해야한다는 것입니다. 콘텐츠는 이미지로 620과 305 픽셀의 두 가지 높이가 있습니다. 작은 것들은 내가 그들을 그렇게 할 서로 위에 스택에 대한 충분한 공간이 이후, http://jsfiddle.net/alekks/2uBLG/인라인 블록 요소에 충분한 높이가있는 경우 강제 중단 선

을 그리고 당신은 작은 사진 라인에 볼 수 있지만 :

이 사이트는 다음과 같습니다. 즉, 작은 사진을있을 때, 인라인 규칙은 다음과 같이 할 적용되지해야합니다

_____ _____________ _____ __ 
|  ||    ||  || | 
|  ||    ||_____||__| 
|  ||    ||  || | 
|_____||_____________||_____||__|

을하지만 작은 클래스를 대상으로 멀리 또는 라인을 깨려고 재산을 가지고가는 경우 : 후, 그것은 단지 전체 선을 깨고 큰 이미지 아래에서 끝납니다.

어떤 솔루션에 대한 아이디어가 있습니까? jQuery는 중요하지 않습니다. 단지 이것을 얻고 싶습니다. :)

내가 무슨 뜻인지 알기를 바랍니다.

자세한 내용은 언제든지 문의하십시오.

출처

2012-08-15 alekks

이 주위에 이동 조각을 가질 수있는 동적 레이아웃을 할 건가요? 그렇지 않은 경우 두 개의 수직 작은 블록을 큰 블록에 중첩시킵니다. 그런 다음 내부의 것들을'display : block'으로 만들어서 다음 줄을 새로운 줄로 밀어 넣습니다. 그 또는 당신은 그들을 떠올리게 수 있지만, 다음 중 하나를 지우거나 컨테이너의 오버 플로우 속성을 처리해야합니다. – TheZ

입력 해 주셔서 감사합니다! 아니, 그것은 계속 성장할 것입니다 다른 의미에서 동적되지 않습니다 -> 하지만 문제는 이것이 어떤 종류의 CMS 템플릿으로 만들어 지므로 CSS 선택기 이외의 변경을 개별적으로 할 수 없다는 것입니다 레벨 ... 아마도 당신의 솔루션을 오해 했나요? 너의 생각을 자유롭게 느껴봐. – alekks

흠, 내 래퍼 요소가 필요하지 않지만 두 개의 작은 이미지가오고 있다는 것을 알고있는 한 그 래퍼 요소를 설명 할 수 있습니다. 여기 예가 있습니다 : http://jsfiddle.net/wQNSQ/ – TheZ

jQuery 이미지의 크기에 따라 다른 클래스를 제공 할 수 있습니다.

jQuery(document).ready(function() { 
    var set = jQuery('#content > img'); 
    for(var i = 0, len = set.length; i < len; i += 1){ 
     set.slice(i, i+1).wrapAll('<div class="postImg" />'); 
    };  

    var set = jQuery('.size-thumbnail'); 
    for(var i = 0, len = set.length; i < len; i += 2){ 
     set.slice(i, i+2).wrapAll('<div class="smallImgWrap" />'); 
    }; 
});

CSS :

#content{ 
     white-space: nowrap; 
    } 
    #content .postImg{ 
     height: 100%; 
     display: inline-block; 
    } 
     .postImg > img{ 
      width: auto; 
     } 

    .smallImgWrap{ 
     display: inline-block; 
    } 
     .smallImgWrap img{ 
      display:block !important; 
      float:none; 
     }

출처

2014-03-21 01:21:03 alekks

인라인 블록 요소에 충분한 높이가있는 경우 강제 중단 선

답변

관련 문제