booster
-
Posts
3 -
Joined
-
Last visited
booster's Achievements
Explorer (1/14)
0
Reputation
-
Получилось то что нужно, но какой-то велосипед.. Это нормальное решение? Можно как-то проще это реализовать? <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>
-
Как тут достичь нужного эффекта? Еще пробовал через 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>
-
Доброго времени суток! Подскажите как можно сверстать такое отображение блоков? Пробовал через свойства float, но ничего не вышло. Максимум что получается это один маленький блок слева, большой по центру и 2 справа + ниже 5 блоков.