karmaşık konumlandırma elemanları (satırları çarpın)

Question

tüm

nasıl unsurların bir bölümü birkaç sıra halinde yerleştirilmiş olan ekran boyutunu değiştirdiğinizde, böylece unsurları program söyle, diğer - Arka arkaya

iki durum: https://s13.postimg.org/pswl5sfjr/example.png

html örnek: https://jsfiddle.net/ehuoy97d/

<div class = "menu"> 
    <div class = "menu-border"></div> 
    <div class = "menu-items-storage"> 
    <div class = "menu-item">#1</div> 
    <div class = "menu-item">#2</div> 
    <div class = "menu-item">#3</div> 
    <div class = "menu-item">#4</div> 
    </div> 
    <div class = "menu-border"></div> 
</div> 

.menu { 
    width: 100%; 

    background-color: #ffe0e0; 

    font-size: 0px; 
} 

.menu .menu-border { 
    display: inline-block; 

    width: 75px; 
    height: 30px; 

    background: #bb0000; 
} 

.menu .menu-items-storage { 
    display: inline-block; 
} 

.menu .menu-item { 
    display: inline-block; 

    width: 30px; 
    height: 30px; 

    margin: 0px 10px; 
    padding: 0px; 

    font-size: 16px; 

    border: 2px solid #80ff80; 
    background-color: #e0ffe0; 
} 

Answer 1

Doğru anlıyorsam, böyle mi? Demo

ben .. position özelliğiyle gönderme için özür oyun kullanmak zorunda: See this fiddle

.menu .menu-items-storage { 
    display: inline-block; 
    width: 30%; 
} 

Answer 2

sorununuzla göre, i

benim keman kontrol .. ben% 90 yakın got düşünüyorum Çok fazla satır olarak css.