"div w divie"

pytanie zadane 5 października 2017 w HTML i CSS przez niezalogowany

Szanowni Forumowicze, stworzyłem div content-harmonogram jako główny div z 100vh i w środku niego przypisałem div harmonogram-tydzie, a do tego diva(harmonogram-tydzie) mniejsze o klasie pon, wt, sr, czw, piat. Chodzi mi o diva o klasie harmonogram-tydzie; chcę aby w tym divie były równo ułożone mniejsze divy (pon, wt, sr...) próbuje z margin i padding ale pierwszy div(pon) nie chce się obniżyć. Jestem w konsternacji...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    
    <link rel="stylesheet" href="main.css">
</head>
<body>
    
    <div class="content-harmonogram">

        <h1>HARMONOGRAM</h1>

        <div class="harmonogram-tydzie">
            <div class="pon">asdasdasd</div>
            <div class="wt"></div>
            <div class="sr"></div>
            <div class="czw"></div>
            <div class="piat"></div>
        </div>

    </div>
    
</body>
</html>

*
{
     margin:0px;
    
}

body
{
    background-color:#eeeeee;
}

.content-harmonogram
{
    margin-top:20px;
    height:100vh;
}

.content-harmonogram h1
{
    text-align:center;
}

.harmonogram-tydzie
{
    width:1500px;
    height:700px;
    background-color:white;
    margin-top:75px;
    margin-left:auto;
    margin-right:auto;
}

.pon
{
    height:18%;
    background-color:black;
    margin-left:100px;
    margin-right:100px;

}



.wt
{
    height:18%;
    background-color:black;
    margin-top:10px;
    margin-left:100px;
    margin-right:100px;
}

.sr
{    
    height:18%;
    background-color:black;
    margin-left:100px;
    margin-right:100px;
    margin-top:10px;
}

.czw
{
    height:18%;
    background-color:black;
    margin-left:100px;
    margin-right:100px;
    margin-top:10px;
}

.piat
{
    height:18%;
    background-color:black;
    margin-left:100px;
    margin-right:100px;
    margin-top:10px;
}

3 odpowiedzi

odpowiedź 5 października 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

Nie do konca rozumiem ale sprobuj dodac `div-tydzien { display: flex; }`

komentarz 5 października 2017 przez niezalogowany

flex daję mi mówiąc kolokwialnie "lipę", może po prostu wykorzystać position relative?

komentarz 5 października 2017 przez Alex.Ironside Stary wyjadacz (14,900 p.)

Moznaby ale to troche uzywanie bazooki do zabicia muchy. Sprobuj z float left moze

odpowiedź 5 października 2017 przez bartolinciu Dyskutant (7,580 p.)

odpowiedź 5 października 2017 przez Bartlomiej Bywalec (2,480 p.)
edycja 5 października 2017 przez Bartlomiej

To chciales?:

https://jsfiddle.net/6bLcajoq/5/

komentarz 6 października 2017 przez niezalogowany
edycja 6 października 2017

Chciałbym aby te klocki były równo ułożone, z dokładnymi marginesami itp - da się to zrobić dzięki niektórym właściwościom czy trzeba liczyć px?

np tez nie mogę zrobić margin-top na pierwszym klocku (div pon) żeby był odstęp od góry

komentarz 6 października 2017 przez Bartlomiej Bywalec (2,480 p.)

Ale jak dasz margin z gory bd mial biala luke z gory chcesz tego ?

Czyli wstepnie jest dobrze i z gory chcesz jeszcze margin tak?

komentarz 6 października 2017 przez niezalogowany

Tak, aby były równe odstępy pomiędzy tymi divami mniejszymi jak i margin gorny pierwszego diva i diva ostatniego margin dolny.

Po prostu te 3 divy(content-harmonogram, harmonogram-tydzie, i pon,wt...) są zagnieżdżone i chcę aby były równe odstępy pomiędzy nimi, mniej więcej już mi się to udało z waszą pomocą.