μλ νμΈμ, μ λ 그리λμ ν¨κ» μΌνκ³ 100 κ° μ΄μμ νλ‘ν μΉ΄λκ°μλ νμ νμ΄μ§κ° μμ΅λλ€. 25 μ΄λ‘ ν νμ λ§λ€μμ§ λ§ λͺ¨λ ν μ€μ μμ΅λλ€.
κ·Έκ²μ λν ν΄κ²°μ± μ΄ μμ΅λκΉ? λλ κ·Έκ²λ€μ΄ 4 νμμ λ€μ μλμ νμν©λλ€. μ΄μ λͺ¨λ ν νμ μμ΅λλ€. λ΄ μ½λλ λ€μκ³Ό κ°μ΅λλ€.
<div class="row">
<div class="column column-25"></div>
<div class="column column-25"></div>
<div class="column column-25"></div>
<div class="column column-25"></div>
<div class="column column-25"></div>
<div class="column column-25"></div>
<div class="column column-25"></div>
<div class="column column-25"></div>
</div>
ν λ© ν΄λμ€λ₯Ό μΆκ°ν΄μΌν©λλ€.
<div class="row row-wrap">
κ·Έλ¬λμ΄λ₯Ό μ¬μ©νλ©΄ λΈλΌμ°μ μ§μμ΄ λ μ νλλ€λ μ μ μ μνμμμ€.
κ°μ λ¬Έμ κ° λ°μνλ©΄ ν μ€ λ°κΏ μΆκ°κ° μλνμ§ μλ κ² κ°μ΅λλ€.
http://codepen.io/steveoc64/pen/WwQgxG
μ€νμΌμ μλμΌλ‘ μ¬μ μνλ©΄ μλν©λλ€.
<div class="row" style="flex-wrap: wrap">
CSSμ λν΄ μΆ©λΆν μμ§ λͺ»ν΄μ μμλλ‘ μλνμ§ μλ μ΄μ λ₯Ό νμ νμ΅λλ€.
λ΄ λΆλΆμ λν κ°λ μ΄ μμμ΄μΌ νμ΄.
<div class="row">
<div class="row-wrap">
....
</div>
</div>
κ·ΈλΌμλ λΆκ΅¬νκ³ μ΄κ²μ λμ€νλ μ΄ μμ±μ μμμ΄ νλ μ€κ° μλ λΈλ‘μ΄κΈ° λλ¬Έμ μλνμ§ μλ κ² κ°μ΅λλ€. μλ§λ μλ λ λμμΈμ μμ μΈκΈ ν κ²μ λλ€. μ¦, κ·νμ μ루μ μ΄ μλ ν μ루μ μ΄μμ κ²μ λλ€.
κ°μ¬ν©λλ€ Imad ... "ν΄κ²° λ°©λ²"μ΄ μ§κΈμ νΈλ¦μ μννμ§λ§ μ΄κΈ° μΈ ν νΈλ μλνλλ‘ μλ ν κ²μ λλ€.
μλμ λ€λ₯Έ divλ₯Ό μ€μ²©νμ§ μκ³ λ class = "row row-wrap"μ΄ μμλλ‘ μνλλλ‘νλ κ²μ΄ ν©λ¦¬μ μΌλ‘ λ€λ¦½λλ€.
... λΉμ€λ λ μμν λ λ€λ₯Έ μ§μ ;)
μλ νμΈμ @ kresogalic8 λ¬Έμ λ₯Ό ν΄κ²°ν μ μμ΅λκΉ? # 100
μ§κΈμμ΄ λ¬Έμ λ₯Ό μ’ λ£νκ² μ΅λλ€. λ€λ₯Έ λμμ΄ νμν κ²½μ° μλ € μ£Όμλ©΄ μ¬κ°νκ² μ΅λλ€.
κ°μ₯ μ μ©ν λκΈ
ν λ© ν΄λμ€λ₯Ό μΆκ°ν΄μΌν©λλ€.
<div class="row row-wrap">
κ·Έλ¬λμ΄λ₯Ό μ¬μ©νλ©΄ λΈλΌμ°μ μ§μμ΄ λ μ νλλ€λ μ μ μ μνμμμ€.