• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

problem z display

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
197 wizyt
pytanie zadane 22 października 2016 w HTML i CSS przez Raciawelli Użytkownik (620 p.)

Hej wszystkim. Mam problem z pozycjonowaniem dwóch kolumn. Tak to wygląda w HTML

        <div class="lewa_kolumna">
            <dl>
				<dt>MENU</dt>
				<dd><a href="#">Strona główna</a></dd>
				<dd><a href="#">Projekt</a></dd>
				<dd><a href="#">Autor</a></dd>
			</dl>
        </div><!-- 
		
     --><div class="prawa_kolumna">
            <h2>Przykładowy tekst lorem ipsum</h2>
            <img src="obrazek.jpg">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <h3>Consectetuer adipiscing elit</h3>
				<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
				<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
        </div>

I do tego formatowanie CSS. Z użyciem float:left wszystko było ok, ale chciałem się pobawić z display: inline-block; i niestety pojawił się problem, który nie wiem z czego wynika, a rozwiązania nie udało mi się znaleźć w sieci. 

.lewa_kolumna {
	display: inline-block;
	/* float: left;  /* kolumny obok siebie */
	padding: 1%;
	width: 23%;

}
.prawa_kolumna {
	display: inline-block;
	padding: 1%;
	width: 73%;	
} 

i na czym polega problem? Otóż lewa kolumna zamiast grzecznie pozostać na górze, spada do poziomu prawej kolumny. Tutaj screen jak to wygląda: [Klik]

Jeśli ktoś ma pomysł co jest nie tak i jak to rozwiązać, to proszę o pomoc :)

1 odpowiedź

+3 głosów
odpowiedź 22 października 2016 przez skav3n Gaduła (3,900 p.)
wybrane 22 października 2016 przez Raciawelli
 
Najlepsza
Ponieważ display: inline-block ustawia wszystko w jednej linii. Jeśli chcesz podnieść menu do góry to dodaj do lewej kolumny 'vertical-align: top'.
komentarz 22 października 2016 przez Raciawelli Użytkownik (620 p.)
doskonale zadziałało, dziękuję :)

Podobne pytania

0 głosów
1 odpowiedź 293 wizyt
0 głosów
1 odpowiedź 241 wizyt

93,103 zapytań

142,077 odpowiedzi

321,563 komentarzy

62,445 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...