Positionierung divs mit Display: Inline-Block. Wie passt man die Höhe nacheinander an?

Question

Ich habe gesucht und versucht, eine einfache Sache zu tun, und ich kann es nicht erreichen. Die Sache ist, dass ich einen Display-Inline-Block auf einige divs anwenden möchte, aber sie nacheinander ausrichten. Wie das Foto.

Das Problem ist also, dass Nummer 4 und 5 nach dem 1 mit Display inline-block positioniert sind:

Also, was kann ich tun? Danke!

.post-it { 
 
    background-color: #F00; 
 
    height: 140px; 
 
    padding: 1em; 
 
    width: 150px; 
 
    display: inline-block; 
 
    margin: 0 1.3em 1.5em 0; 
 
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50); 
 
} 
 

 
.title { 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    line-height: 1em; 
 
    margin-bottom: .2em; 
 
} 
 

 
#today { 
 
    height: 300px; 
 
}

<div> 
 
    <div class="post-it" id="today"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 25 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 26 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 27 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 28 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 29 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
</div>

Answer 1

Versuchen Sie eine feste Breite auf der äußeren div Einstellung ich es #Kalender genannt und dann die Eigenschaft float hinzufügen: von links nach Ihrem .post- es Klasse. Ich hoffe das hilft!

.post-it { 
 
    background-color: #F00; 
 
    height: 140px; 
 
    padding: 1em; 
 
    width: 150px; 
 
    display: inline-block; 
 
    margin: 0 1.3em 1.5em 0; 
 
float: left; 
 
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50); 
 
} 
 

 
.title { 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    line-height: 1em; 
 
    margin-bottom: .2em; 
 
} 
 

 
#today { 
 
    height: 300px; 
 
} 
 
#calendar { 
 
    width: 800px; 
 
}

<div id="calendar"> 
 
    <div class="post-it" id="today"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 25 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 26 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 27 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 28 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 29 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
</div>

Answer 2

try this:

.post-it { 
    float: left; 
} 

Answer 3

das Verhalten, Sie werden immer vollständig normal.think über Inline-Block wie eine Textzeile ..

Anmerkung: Rohre stellen tatsächlich divs

was passiert in der ersten Zeile ist etwas wie folgt (betrachten Sie das folgende Schnipsel als eine Zeile):

|****|***| 
| 

jetzt, wenn Sie fügen Sie mehr Text

|****|***| <<< opps no enough space go to next line 
| 

aber die nächste Zeile ist nicht A (weil es praktisch immer noch die gleiche Zeile):

|****|***| 
| <<< A 

es ist eine neue leere Zeile B

|****|***| 
| <<< A 
<<< B 

so was Sie suchen, ist schwebend. keine Inline-Blöcke.

.post-it { 
 
    background-color: #F00; 
 
    height: 140px; 
 
    padding: 1em; 
 
    width: 150px; 
 
    float:left; 
 
    margin: 0 1.3em 1.5em 0; 
 
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50); 
 
} 
 

 
.title { 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    line-height: 1em; 
 
    margin-bottom: .2em; 
 
} 
 

 
#today { 
 
    height: 300px; 
 
}

<div> 
 
    <div class="post-it" id="today"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 25 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 26 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 27 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 28 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
    <div class="post-it"> 
 
    <header> 
 
     <div class="title"> 
 
     Day 29 
 
     </div> 
 
     <hr> 
 
    </header> 
 
    </div> 
 
</div>