float

kullanarak dikey olarak divs yığınları Float: left kullanarak divleri dikey olarak yığmaya çalışıyorum.float

Ancak, varsayılan olarak yatay olarak yığılırlar.

Css kullanarak herhangi bir çözüm? Bu i elde ediyoruz

> +-----+-----+-----+ 
> | 1 | 6 | 11 | 
> +-----+-----+-----+ 
> | 2 | 7 | 12 | 
> +-----+-----+-----+ 
> | 3 | 8 | 13 | 
> +-----+-----+-----+ 
> | 4 | 9 | 14 | 
> +-----+-----+-----+ 
> | 5 | 10 | 15 | 
> +-----+-----+-----+

i almak istediğini olduğunu

> +-----+-----+-----+ > | 1 | 2 | 3 | > +-----+-----+-----+ > | 4 | 5 | 6 | > +-----+-----+-----+ > | 7 | 8 | 9 | > +-----+-----+-----+ > | 10 | 11 | 12 | > +-----+-----+-----+ > | 13 | 14 | 15 | > +-----+-----+-----+

Ben yeniden düzenlemek istiyorum div bir görüntüsü:

Her div bir sayı, bir resim ve bir ad içerir.

#championsWrapper { float: left; width: 180px; }

kaynak

2016-04-02 juan fran

bunun için neden tablo kullanıyorsunuz? herhangi bir özel sebep? – zeropublix

Boşluklarınızı sütunlar halinde düzenleyin:)) – moonwave99

Sütun taşma ve karşı taraflarına bakın: https: // css-tricks.com/guide-responsive-friendly-css-columns/ – Stuart

Ben, CSS sütunlarını kullanarak column-count kullanarak (ve bu özellik için çeşitli satıcı-önek) öneririm

#container { 
 
    -moz-column-count: 3; 
 
    -ms-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
} 
 
#container div { 
 
    background-color: #fff; 
 
} 
 
#container div:nth-child(odd) { 
 
    background-color: #ccc; 
 
}

<div id="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="item">10</div> 
 
    <div class="item">11</div> 
 
    <div class="item">12</div> 
 
    <div class="item">13</div> 
 
    <div class="item">14</div> 
 
    <div class="item">15</div> 
 
    <div class="item">16</div> 
 
    <div class="item">17</div> 
 
    <div class="item">18</div> 
 
    <div class="item">19</div> 
 
    <div class="item">20</div> 
 
    <div class="item">21</div> 
 
</div>

görsel border özelliği (column-rule-widthcolumn-rule-stylecolumn-rule-color) ile aynı sözdizimi kullanılarak, sütun ayrı dikey çizgiler eklemek column-rule özelliği kullanabilirsiniz gerekirse:

#container { 
 
    -moz-column-count: 3; 
 
    -ms-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    -moz-column-rule: 2px solid #999; 
 
    -ms-column-rule: 2px solid #999; 
 
    -webkit-column-rule: 2px solid #999; 
 
    column-rule: 2px solid #999; 
 
} 
 

 
#container div { 
 
    background-color: #fff; 
 
} 
 

 
#container div:nth-child(odd) { 
 
    background-color: #ccc; 
 
}

<div id="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="item">10</div> 
 
    <div class="item">11</div> 
 
    <div class="item">12</div> 
 
    <div class="item">13</div> 
 
    <div class="item">14</div> 
 
    <div class="item">15</div> 
 
    <div class="item">16</div> 
 
    <div class="item">17</div> 
 
    <div class="item">18</div> 
 
    <div class="item">19</div> 
 
    <div class="item">20</div> 
 
    <div class="item">21</div> 
 
</div>

Ve elbette, sütunlar arasındaki olukları column-gap:

kullanarak ayarlayın.

#container { 
 
    -moz-column-count: 3; 
 
    -ms-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    -moz-column-rule: 2px solid #999; 
 
    -ms-column-rule: 2px solid #999; 
 
    -webkit-column-rule: 2px solid #999; 
 
    column-rule: 2px solid #999; 
 
    -moz-column-gap: 3em; 
 
    -ms-column-gap: 3em; 
 
    -webkit-column-gap: 3em; 
 
    column-gap: 3em; 
 
} 
 
#container div { 
 
    background-color: #fff; 
 
} 
 
#container div:nth-child(odd) { 
 
    background-color: #ccc; 
 
}

<div id="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="item">10</div> 
 
    <div class="item">11</div> 
 
    <div class="item">12</div> 
 
    <div class="item">13</div> 
 
    <div class="item">14</div> 
 
    <div class="item">15</div> 
 
    <div class="item">16</div> 
 
    <div class="item">17</div> 
 
    <div class="item">18</div> 
 
    <div class="item">19</div> 
 
    <div class="item">20</div> 
 
    <div class="item">21</div> 
 
</div>

Referanslar:

kaynak

2016-04-02 12:13:01

Teşekkürler! Zarif ve basit bir çözüm! Bu –

bilmiyordum Gerçekten çok hoş geldiniz, yardım ettim için mutluyum! :) –

Hemen şöyle divs tümü üzerinde display:inline-block kullanın: bu div kodudur.

.champion-wrapper{ 
 
    width:150px; 
 
    display:inline-block; 
 
}

<div class="champion-wrapper">1</div> 
 
<div class="champion-wrapper">2</div> 
 
<div class="champion-wrapper">3</div> 
 
<div class="champion-wrapper">4</div> 
 
<div class="champion-wrapper">5</div> 
 
<div class="champion-wrapper">6</div> 
 
<div class="champion-wrapper">7</div> 
 
<div class="champion-wrapper">8</div> 
 
<div class="champion-wrapper">9</div> 
 
<div class="champion-wrapper">10</div>

kaynak

2016-04-02 12:06:27 Wowsk

Bu soru nasıl yanıtlanır ? OP zaten bu düzeni alır (ilk ASCII resminde gösterilir ve gösterilen * * düzeni [s/he] * yeniden düzenlemek ister, istenen düzen sütundur (ikinci ASCII resminde gösterilir) –

kullanabilirsiniz columnslike this

#champions { 
    -webkit-columns: 3; 
    -moz-columns: 3; 
    columns: 3; 
}

kaynak

2016-04-02 12:09:41

cevap

İlgili konular