Divy nie chcą się ułożyć obok siebie - ''schodkują się''

pytanie zadane 4 grudnia 2019 w HTML i CSS przez domeczegg Nowicjusz (120 p.)

Od ponad godziny męczę się z uporczywymi divami, które nie chcą się ułożyć obok siebie tylko tworzą schodki - pierwszy jest okej i chciałbym żeby cała reszta (pozostałe 2 divy) była w szeregu, jednak każdy następny schodzi niżej. Miejsca im nie brakuje bo są w tej samej linii, ale poschodkowane. Float left jest, display inline block także. Kombinowałem z marginesami/paddingami ale ciągle to samo. Czym to może być spowodowane?

1	komentarz 4 grudnia 2019 przez radek024 Szeryf (77,160 p.) edycja 13 grudnia 2019 przez HaKIM Dobrą praktyką jest umieszczanie kodu strony - chociażby na takim portalu jak codepen.

3 odpowiedzi

odpowiedź 13 grudnia 2019 przez pirouetti Mądrala (6,490 p.)

odpowiedź 4 grudnia 2019 przez DawidK Nałogowiec (37,910 p.)

Możesz spróbować czegoś takiego:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>divy w linii</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
    <div class='main-container'>
        <div class='in-line-div'>
            1
        </div>
        <div class='in-line-div'>
            2
        </div>
        <div class='in-line-div'>
            3
        </div>
    </div>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
}

.main-container {
    position: absolute;
    top: 300px;
    max-width: 100%;
    width: 100vw;
}

.in-line-div {
    border: 1px solid #FFF;
    display: inline-block;
    height: 100px;
    width: 33%;
}

odpowiedź 13 grudnia 2019 przez sKodowany Obywatel (1,150 p.)

Witaj :-)

Męczarnie znam dobrze... ale tutaj rozwiązanie jest proste - więc pewnie Ty masz jakiś błąd, albo coś przekombinowałeś.... na jedno wychodzi.

A kod jest taki... najprościej, ale bez wyrównania justowania zawartości itd...

...
<body>

		<div class="inLineDivs"> </div>
		<div class="inLineDivs"> </div>
		<div class="inLineDivs"> </div>

<style>

		body
		{
		background-color: olive;
		}
		
		.inLineDivs
		{
		width: 30%;
		height: 30%;
		border: 2px solid black;
		float: left;
		margin: 10px;
		}

</style>
</body>
...

Pozdrawiam i życzę powodzenia!