Большой обтекаемый блок на bootstrap

booster · June 12, 2015

Доброго времени суток!

Подскажите как можно сверстать такое отображение блоков? Пробовал через свойства float, но ничего не вышло. Максимум что получается это один маленький блок слева, большой по центру и 2 справа + ниже 5 блоков.

sigma77 · June 12, 2015

В зависимости от целей/задач/поведения блоков:

1) флоаты

2) инлайн-блоки

3) флекс-боксы

4) инлайн-блоки

5) абсолютное позиционирование

booster · June 13, 2015

Как тут достичь нужного эффекта? Еще пробовал через float, но максимум, что получается это два элемента слева, большой в центре и один справа, второй "справа" оказывается строкой ниже. (вторую строку в расчет не беру, там все понятно)

<html>    <head>        <style>            div { display: inline-block; vertical-align: top;}            .w1 { width: 50px }            .w3 { width: 160px }            .w5 { width: 270px; }            img { width: 100%; }            .block { display: block; }        </style>    </head>    <body>        <div class="w5 block">            <div class="w1"><img src="404" /></div>            <div class="w3"><img src="404" style="height: 100px;" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>        </div>        <div class="w5 block">            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>        </div>    </body></html>

booster · June 13, 2015

Получилось то что нужно, но какой-то велосипед.. Это нормальное решение? Можно как-то проще это реализовать?

<html>    <head>        <style>            div { display: inline-block; vertical-align: top;}            .w1 { width: 50px; }            .w3 { width: 160px; }            .h { height: 105px; }            .w5 { width: 270px; }            img { width: 100%; }            .block { display: block; }            .up { margin-top: -50px; }            .r { float: right; }            .down { margin-bottom: 5px; }        </style>    </head>    <body>        <div class="w5 block down">            <div class="w1"><img src="404" /></div>            <div class="w3 h"><img class="h" src="404" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1 up"><img src="404" /></div>            <div class="w1 up r"><img src="404" /></div>        </div>        <div class="w5 block">            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>            <div class="w1"><img src="404" /></div>        </div>    </body></html>

Sign In

Большой обтекаемый блок на bootstrap

Question

booster

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

booster

Link to comment

Share on other sites

booster

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information