komplexe Positionierungselemente (multiplizieren Zeilen)

Question

alle

sagen Sie mir, wie Elemente zu programmieren, so dass, wenn Sie die Bildschirmgröße der ein Teil der Elemente in mehreren Reihen angeordnet wurde, und andere - in einer Reihe

zwei Fälle: https://s13.postimg.org/pswl5sfjr/example.png

html Beispiel: 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

Wenn ich das richtig verstehe, so? See this fiddle

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

Answer 2

Nach Ihrer Frage, ich glaube, ich am nächsten zu 90% bekam ..

meine Geige überprüfen: Demo

Ich spiele mit position Eigenschaft zu verwenden hatte .. sorry für nicht veröffentlichen css als zu viel Linien so.