Göstergeli divların yerleştirilmesi: satır içi blok. Birbiri ardına yükseklik nasıl adapte edilir?

Question

Basit bir şey arıyor ve yapmaya çalışıyorum ve bunu başaramıyorum. Mesele şu ki, bir satır içi satır içi gösterimi bazı div'lara uygulamak ama birbiri ardına hizalamak istiyorum. Fotoğraftaki gibi.

Yani sorun bu sayı 4 ve 5 ekran inline-block ile 1 sonra konumlandırılmış olan:

Yani

ne yapabilirim? Teşekkürler!

.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

: En .post- soldan bu sınıf. Umarım bu yardımcı olur!

.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

bu deneyin:

Ben #calendar ve sonra mülkiyet şamandıra eklemek denilen dış div üzerinde sabit bir genişlik belirlemeyi deneyin

.post-it { 
    float: left; 
} 

Answer 3

Eğer alıyorsanız davranış metin satırı gibi satır içi blok hakkında tamamen normal.think olduğunu ..

not: boruları gerçek div'leri

neyi temsil İlk satırda aşağıdaki gibi bir şey olur (aşağıdaki satır parçasını bir satır olarak düşünün):

|****|***| 
| 

şimdi daha fazla metin

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

eklerken ama (aynı çizgi pratikte hala olduğu için) bir sonraki hat A isnt:

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

yeni bir boş satır B

var

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

aradığınız şey yüzüyor. satır içi bloklar değil.

.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>