inline-block ustawienie elementów jeden pod drugim

pytanie zadane 5 marca 2018 w HTML i CSS przez dudijr Początkujący (280 p.)

Witam serdecznie Kolegów i Koleżanki :)

Będę wdzięczny za wszelką pomoc. Mianowicie mam taki problem: chciałbym, że elementy <h2> i <span> miały właściwość inline block ale ustawiały się jeden pod drugim, czyli dokładnie tak jak klasyczne elementy blokowe. Pytanie jak ich do tego zmuśić? :)

pozdrówki

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Stronka templatka</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
</head>
<body>
	<div class="container">
		<header>
			<div class="logo">
				<img src="logo.jpg">
			</div>
			<nav>
				<ul>
					<li><a class="link active" href="#">Home</a></li>
					<li><a class="link" href="#">About</a></li>
					<li><a class="link" href="#">Gallery</a></li>
					<li><a class="link" href="#">Blog</a></li>
					<li><a class="link" href="#">Contact</a></li>
				</ul>
			</nav>
		</header>
	<main>
		<section>
			<div class="wstep">
			
				<img src="the-beacon.jpg">
		
				<div class="quotes">
					<h2>The Beacon to All Mankind</h2>
					<span>Our website templates are created with</span>
					<span>inspiration, checked for quality and originality</span>
					<span>and meticulously sliced and coded.</span>
				</div>

			</div>
		</section>
		<section class="fotki">
			<div class="content">
				<div class="zdjecie"><img src="the-father.jpg"></div>
				<div class="zdjecie"><img src="the-actor.jpg"></div>
				<div class="zdjecie"><img src="the-nerd.jpg"></div>
			</div>
		</section>
	</main>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
}

.container {
	width: 100%;
	font-family: 'Anton', sans-serif;
}

.logo {
	text-align: center;
}

.logo img {
margin-top: 30px;
margin-bottom: 30px;
}

nav {
	width: 100%;
	text-align: center;
}

nav ul {
	margin: 0 0 30px 0;
	padding: 0;
	display: inline-block;
	list-style-type: none;
}

nav li {
	float: left;
	width: 70px;
	height: 40px;
	text-transform: uppercase;
	font-size: 18px;
	margin: 0 20px;
}

.link {
	color: black;
	text-decoration: none;
}

.link:hover {
	color: #0ba39c;
}

.active {
	color: #0ba39c;
}


.wstep {
	width: 100%;
	position: relative;
}

.wstep img {
	width: 100%;
}

.quotes {
width: 600px;
height: 300px;
border: 2px solid black;
position: absolute;
top: 100px;
right: 50px;
}

h2 {
	height: 30px;
	display: inline-block;
	border: 2px solid black;
	padding: 10px 15px;
}

.quotes>span{
	height: 30px;
	display: inline-block;
	border: 2px solid black;
	padding: 10px 15px;

3 odpowiedzi

odpowiedź 5 marca 2018 przez thryndl Nałogowiec (30,470 p.)

Nie lepiej tego zrobić na flexie? jsfiddle.net

komentarz 5 marca 2018 przez dudijr Początkujący (280 p.)
edycja 5 marca 2018 przez dudijr

niestety jestem jeszcze zielony w tym temacie :) ale dzięki za pomoc przenalizuje Twój kod :)

Tak ma wyglądać finalny efekt.

https://freewebsitetemplates.com/preview/mustacheenthusiast/index.html

komentarz 5 marca 2018 przez dudijr Początkujący (280 p.)

niestety nie do końca mi o to chodziło. Chciałbym, żeby te boxy kończyły się za takstem. Raz będą dłuższe raz krótsze w zależności o ilości wyrazów.

1	komentarz 5 marca 2018 przez thryndl Nałogowiec (30,470 p.) Poprawilem: https://jsfiddle.net/4cqzjb54/7/ Wystarczy ustawić align-items: flex-start dla rodzica, wtedy wszystkie dzieci będą pozycjonowane od lewej (czyli początku) a rozmiar będzie ustalany dynamicznie w zależności od kontentu.

komentarz 6 marca 2018 przez dudijr Początkujący (280 p.)

o to mi właśnie chodziło :) wielkie dzięki!

odpowiedź 5 marca 2018 przez EdeX Mądrala (5,130 p.)

nie rozumiem twojego toku rozumowania ale ustaw h2 100% width i sie ustawi :/

komentarz 5 marca 2018 przez dudijr Początkujący (280 p.)

nie chce właśnie tego robić bo poszczególne boxy, zarówno h2 jak i span będą miały różną szerokość. Ze względu na ilość wyrazów. chciałem, żeby to był inline-block, żeby szerokość tych divów wyskalowała się automatycznie właśnie w zależnośći od długości danego tekstu. Niestety przy inline-block elementy ustawiają się liniowo.

Tak ma wyglądać finalny efekt:

https://freewebsitetemplates.com/preview/mustacheenthusiast/index.html