Niepoprawne wyświetlanie div w in-block

Question

Cześć,

Mam problem z poprawnym wyświetlaniem jednego z Diva (chodzi o ten 2 - nierówno ułożony). Pry aktualnej ilości tekstu drugi Div ustawia się poniżej pozostałych. Gdybym dodał na końcu tekstu drugiego diva kilka liter (tj. aby miał tyle samo linii co pierwszy Div) to będzie się wyświetlał na równi z pozostałymi. 

Czy ktoś wie co zmieni w kodzie aby przy aktualnej ilości tekstu divy wyświetlały się w równej lini?

Kod CSS

#offer
{
	text-align: center;
}

.oferta
{
	width: 32%;
	height: 250px;
	border: 1px dotted white;
	background-color: #FE8D00;
	display: inline-block;
}

Comments

Pokaż jeszcze kod HTML.

Strzelam, że użycie vertical-align: middle powinno pomóc.

---

Z pewnością spróbuję, dziękuję 

Poniżej kod html:

<div id="offer"><h2>Przejdźmy teraz do szczegółów <span class="red">oferty :)</span></h2>
		<div class="oferta"><h3>Gdzie gram<span class="red"> ?</span></h3>
			<ul>
				<li>Wesela</li>
				<li>Poprawiny</li>
				<li>Urodziny</li>
				<li>Imprezy firmowe</li>
				<li>Wszędzie gdzie oczekiwana jest dobra zabawa ;)</li>
			</ul>
		</div>
		<div class="oferta"><h3>Co gram<span class="red"> ?</span></h3>
			<ul>
				<li>Biesiada</li>
				<li>Utwory żołnierskie</li>
				<li>Utwory francuskie i rosyjskie</li>
				<li>Marsze weselne i wojskowe</li>
				<li>Wszystko czego klienci oczekują :)</li>
			</ul>
		</div>		
		<div class="oferta"><h3>Dlaczego warto<span class="red"> ?</span></h3>
					Wielokrotnie uratowałem wesela i inne imprezy przed totalną klapą... Wynajmując mnie masz pewność, że Twoi goście będą się świetnie bawić a pieniądze, które wydałeś, nie pójdą na marne.
		</div>		
	</div>

 

---

@ScriptyChris, Super - vertical-align: middle  pomogło :)

Czy możesz mi jeszcze wyjaśnić dlaczego wczesniej wyświetlało się źle? :)

Będę bardzo wdzięczny.

Pozdrawiam,

---

Czy możesz mi jeszcze wyjaśnić dlaczego wczesniej wyświetlało się źle? :)

Jak sobie zmienisz szerokość viewportu strony (choćby przez zmianę szerokości okna przeglądarki), to zauważysz, że ostatnia linia tekstu (choć to, z tego co kojarzę, zależy od ustawienia writing-mode) w elementach o klasie "oferta" zawsze stara się być równa - jest to spowodowane przez domyślną wartość baseline dla vertical-align. To wpływa na pionowe ułożenie poszczególnych elementów, które z kolei - w zależności od liczby linii tekstu - mogą same w sobie nie być równo ułożone w pionie.

Answer 1

Proponuje użycie flex.

<div class="oferta-kontener">
  <div class="oferta--tytul">
    <h2>Przejdźmy teraz do szczegółów <span class="red">oferty :)</span></h2>
  </div>

  <div class="oferta--wiersz">
    <div class="oferta--bloczek">
      <h3>Gdzie gram<span class="red">?</span></h3>
      <ul>
        <li>Wesela</li>
        <li>Poprawiny</li>
        <li>Urodziny</li>
        <li>Imprezy firmowe</li>
        <li>Wszędzie gdzie oczekiwana jest dobra zabawa &#128578;</li>
      </ul>
    </div>
    <div class="oferta--bloczek">
      <h3>Co gram<span class="red">?</span></h3>
      <ul>
        <li>Biesiada</li>
        <li>Utwory żołnierskie</li>
        <li>Utwory francuskie i rosyjskie</li>
        <li>Marsze weselne i wojskowe</li>
        <li>Wszystko czego klienci oczekują &#128578;</li>
      </ul>
    </div>        
    <div class="oferta--bloczek">
      <h3>Dlaczego warto<span class="red">?</span></h3>
      <p>Wielokrotnie uratowałem wesela i inne imprezy przed totalną klapą.</p>
      <p>Wynajmując Mnie masz pewność, że Twoi goście będą się świetnie bawić a pieniądze, które wydałeś, nie pójdą na marne.</p>
    </div>
  </div>

</div>

.oferta-kontener
{
  width: 90vw;  
  margin: 0 auto;
}
.oferta-kontener .oferta--tytul {
  text-align: center;
}
.oferta-kontener .oferta--wiersz {
  display: flex;
}
.oferta-kontener .oferta--wiersz .oferta--bloczek
{
  width: 33.33%; /* lub calc(100% / 3) */
  border: 1px dotted white;
  padding: 1em;
  background-color: #FE8D00;
}

 

 

[ Emoji Unicode Reference ]

Comments

https://jsfiddle.net/wah64j07   ( nutka ) 

 

[ CSS list style with Emojis ]

---

Dziękuję