Порядок сортировки с каменной кладкой, такой как css, нарушен

Я отобрал элементы с каменной кладкой, как макет с css. Но порядок сортировки предметов нарушен. ниже - изображение, которое имеет номера с каждым элементом. Они должны сортироваться в соответствии с числами в строках, а не в столбцах. Я тоже попробовал flex, который исказил макет. Итак, я хочу сделать это с помощью flex. Вот код 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. Вам нужен javascript. –

Это не возможно, чтобы получить вид на линии с функцией CSS столбец подсчета. Решение будет возможно, когда CSS3 Grid Layout будет корректно поддерживаться браузерами, но на данный момент мы используем только javascript.

// 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

Порядок сортировки с каменной кладкой, такой как css, нарушен

ответ

Смежные вопросы