Jak rozmieścić elementy za pomocą css

0

Witam,

jak rozmieścić elementy tak jak na załączniku, tzn. u góry jak widać są dwa, pod spodem trzy, i na dole dwa

1

Możesz użyć grida z bootstrapa, np.

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    </head>
    <body>
        <div class="container" style="height:800px">
            <div class="row" style="height:33%;">
                <div class="col-md-9 col-xs-9" style="background:#FF0000;height:100%;"></div>
                <div class="col-md-3 col-xs-3" style="background:#00FF00;height:100%;"></div>
            </div>
            <div class="row" style="height:33%;">
                <div class="col-md-5 col-xs-5" style="background:#0000FF;height:100%;"></div>
                <div class="col-md-7 col-xs-7">
                    <div class="row" style="background:#F0F0F0;height:50%;"></div>
                    <div class="row" style="background:#0F0F0F;height:50%;"></div>
                </div>
            </div>
            <div class="row" style="height:33%;">
                <div class="col-md-4 col-xs-4" style="background:#FF0000;height:100%;"></div>
                <div class="col-md-8 col-xs-8" style="background:#00FF00;height:100%;"></div>
            </div>
        </div>
    </body>
</html>
0

dzięki, trzeba poznać bootstrap

0

Jak już się będziesz uczyć bootstrapa to zainteresuj się też preprocesorami cssa, bo tych brzydkich klas przybywa i bez mixinów ciężko jest utrzymać porządek w kodzie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0