div 3x z równymi odstępami

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

Szanowni Forumowicze, Chciałem stworzyć piękny symetryczny napis w tych divach z równymi odstępami z prawej lewej z góry i dołu tak jak wygląda to w kodzie, ale za bardzo równo mi nie wychodzi widać, że niektóre są nierówne. Czy można za pomocą flexa stworzyć taki równy układ między tymi albo wgl jaki będzie najlepszy sposób na tego typu ułożenie, i czy to dobry znacznik do takiego celu?

<body>

        <div class="content-harmonogram">

            <h1>HARMONOGRAM</h1>

            <div class="harmonogram-tydzie">
                <div class="pon">

                    <div class="napis_harmonogram">
                        <p>Poniedziałek</p>
                        <p>11:00 - 17:00</p>
                        <p>ul. Solna 17</p>
                    </div>

                </div>
                <div class="wt">

                    <div class="napis_harmonogram">
                        <p>Wtorek</p>
                        <p>8:00 - 14:00</p>
                        <p>ul. Solna 17</p>
                    </div>

                </div>
                <div class="sr">

                    <div class="napis_harmonogram">
                        <p>Środa</p>
                        <p>14:00 - 20:00</p>
                        <p>ul. Wiejska 20</p>
                    </div>

                </div>
                <div class="czw">

                    <div class="napis_harmonogram">
                        <p>Czwartek</p>
                        <p>6:00 - 12:00</p>
                        <p>ul. Solna 17</p>
                    </div>

                </div>
                <div class="piat">

                    <div class="napis_harmonogram">
                        <p>Piątek</p>
                        <p>11:00 - 17:00</p>
                        <p>ul. Wiejska 20</p>
                    </div>

                </div>
            </div>

        </div>


    </body>

.content-harmonogram
{
    height:100vh;
    background-color:#eeeeee;
}

.content-harmonogram h1
{
    font-size:70px;
    letter-spacing:-6px;
    text-align:center;
    
    font-weight:900;
    background-color:white;
    /*box-shadow: 2px 2px 10px 2px #ddd;*/
    box-shadow: 0px 5px 10px 0px #ddd;

}

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

    align-items:center;
    flex-direction: column;
    display:flex;
    justify-content: space-around;
}
.pon
{
    height:15%;
    width:1400px;
    background-color:#eeeeee;
    box-shadow: 10px 10px 10px 0px #ddd;



}



.wt
{
    height:15%;
    width:1400px;
    background-color:#eeeeee;
    box-shadow: 10px 10px 10px 0px #ddd;
}

.sr
{    
    height:15%;
    width:1400px;
    background-color:#eeeeee;
    box-shadow: 10px 10px 10px 0px #ddd;
}

.czw
{
    height:15%;
    width:1400px;
    background-color:#eeeeee;
    box-shadow: 10px 10px 10px 0px #ddd;
}

.piat
{
    height:15%;
    width:1400px;
    background-color:#eeeeee;
    box-shadow: 10px 10px 10px 0px #ddd;
    margin-bottom;
}



.napis_harmonogram
{
    font-size:20px;
    padding:35px;
    display:flex;
    justify-content: space-around;


    font-weight: 700;

}

komentarz 14 października 2017 przez shotokan Nałogowiec (39,660 p.)

ja tak tylko w sprawie box-shadow
nie zapomnij dostosować tej właściwości css do różnych przeglądarek, czyli
-webkit-box-shadow
-moz-box-shadow
tak przy okazji:
https://www.cssmatic.com/box-shadow

1 odpowiedź

odpowiedź 14 października 2017 przez Wujek Greg Dyskutant (9,410 p.)
wybrane 14 października 2017

Najlepsza

Generalnie to tak:

- po co Ci klasy .pon, .wt itp. skoro mają takie same właściwości? Lepiej wyrzuć divy z tymi klasami, przenieś style do .napis_harmonogram (zmieniłbym nazwę na harmonogram_dzien bo napis_harmonogram nie mowi nic) i będzie dużo lepiej

- jeżeli chcesz wyrównać elementy we flexie to skorzystaj z align-items:center do wyrównania w poziomie i w tym przypadku albo justify-content: space-between, albo nadaj flex: 1 dla elementów z jednoczesnym nadaniem właściwości text-align:center