벽돌과 같은 정렬 순서가 방해받는

CSS가있는 레이아웃과 같은 벽돌로 항목을 렌더링했습니다. 그러나 항목의 정렬 순서가 방해됩니다. 아래는 각 항목에 숫자가있는 이미지입니다. 열이 아닌 행의 숫자에 따라 정렬되어야합니다. 레이아웃을 왜곡 한 플렉스도 시도했습니다. 그래서, 나는 밖으로 굴곡으로 그것을하고 싶다. 여기에 CSS 코드 :벽돌과 같은 정렬 순서가 방해받는

ul.ads-collection { 
    margin: 1em 0; 
    padding: 0; 
    -moz-column-gap: 0.5em; 
    -webkit-column-gap: 0.5em; 
    column-gap: 0.5em; 
    font-size: .85em; 
} 

ul.ads-collection li { 
    display: inline-block; 
    background: #fff; 
    padding: 0; 
    margin: 0 0 0.2em; 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-shadow: 2px 2px 4px 0 #ccc; 
}

그리고 여기에 HTML입니다 :

<ul class="ads-collection"> 
    <li> 
     <div class="ad"> 
      <img src=".." alt="No Image" class="img-responsive"> 
      <div class="col-xs-12 padding-bottom-10 padding-top-10"> 
       <h2 class="no-margins"><a href="javascript:;" class="no-margins"><strong>1 - Testing classified</strong></a></h2> 
       <span class="location font-weight-normal">Abu Dhabi</span> 
       <span class="price font-red font-weight-normal"><strong>536</strong> AED</span> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="ad"> 
      <div class="col-xs-12 padding-bottom-10 padding-top-10"> 
       <h2 class="no-margins"><a href="javascript:;" class="no-margins"><strong>2 - Samsung Galaxy Golden i9235</strong></a></h2> 
       <span class="location font-weight-normal">Dubai</span> 
       <span class="price font-red font-weight-normal"><strong>500</strong> AED</span> 
      </div> 
     </div> 
    </li> 
</ul>

출처

2016-12-20 Jamal Abdul Nasir

시도는 HTML 코드 또는 jsfiddle 링크를 게시합니다. 내 생각에 열 속성 대신 표시 : 인라인 블록 및 각 li에 % 또는 float 사용 –

* "그들은 열이 아닌 행의 숫자에 따라 정렬되어야합니다."*이 CSS Flexbox 불가능합니다. 자바 스크립트가 필요합니다. –

CSS를 열 카운트 기능이있는 선으로 정렬을 얻을 수 없습니다. 브라우저에서 CSS3 Grid Layout을 올바르게 지원할 수있는 솔루션이 가능하지만 현재 자바 스크립트 만 사용하고 있습니다.

// With Stylus preprocessor: 

$gutter = 1.5rem 
$sizeXS = 36.01rem 

.masonry 
    margin $gutter 0 
    column-gap $gutter 

@media (min-width $sizeXS) 
    .masonry 
    column-count 2 

// etc...

Responsive Masonry in CSS only

출처

2016-12-20 11:04:03

벽돌과 같은 정렬 순서가 방해받는

답변

관련 문제