Question

我希望在网格中显示具有固定宽度和动态高度以及特定垂直和水平边距的多个图像（甚至其他内容）。

如何在不对HTML标记中的项目进行排序的情况下实现某种排序？目前，我按列从上到下依次按升序读取数字。我想从左到右，逐行读取数字。

＆＃13;

.grid {
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 0;
    -moz-column-count: 3;
    -moz-column-gap: 0;
    column-count: 3;
    column-gap: 0;
}

.grid img {
    width: 100% !important;
    height: auto !important;
}

＆＃13;

<p>Given markup order</p>
<div class="grid">
    <img src="http://placehold.it/300x300/aabbcc?text=1">
    <img src="http://placehold.it/300x341/aaccbb?text=2">
    <img src="http://placehold.it/300x254/bbaacc?text=3">
    <img src="http://placehold.it/300x384/bbccaa?text=4">
    <img src="http://placehold.it/300x256/ccaabb?text=5">
    <img src="http://placehold.it/300x174/ccbbaa?text=6">
    <img src="http://placehold.it/300x413/ddeeff?text=7">
    <img src="http://placehold.it/300x518/ddffee?text=8">
    <img src="http://placehold.it/300x324/eeddff?text=9">
    <img src="http://placehold.it/300x192/eeffdd?text=10">
    <img src="http://placehold.it/300x195/ffddee?text=11">
    <img src="http://placehold.it/300x481/ffeedd?text=12">
</div>

<p>Desired display order with markup from above</p>
<div class="grid">
    <img src="http://placehold.it/300x300/aabbcc?text=1">
    <img src="http://placehold.it/300x341/aaccbb?text=4">
    <img src="http://placehold.it/300x254/bbaacc?text=7">
    <img src="http://placehold.it/300x384/bbccaa?text=10">
    <img src="http://placehold.it/300x256/ccaabb?text=2">
    <img src="http://placehold.it/300x174/ccbbaa?text=5">
    <img src="http://placehold.it/300x413/ddeeff?text=8">
    <img src="http://placehold.it/300x518/ddffee?text=11">
    <img src="http://placehold.it/300x324/eeddff?text=3">
    <img src="http://placehold.it/300x192/eeffdd?text=6">
    <img src="http://placehold.it/300x195/ffddee?text=9">
    <img src="http://placehold.it/300x481/ffeedd?text=12">
</div>

＆＃13;

具有列排序的图像网格

0 个答案: