CSS, HTML и JavaScript
Блоки div на всю ширину экрана, с переносом на следующую строку
Подобных примеров в интернете я встречал немало. Но все они были либо на таблицах, либо предлагались очень сложные варианты. Мой вариант отличается простотой.
Для реализации этого примера человеку понадобились бы:
- Базовые знания html;
- Базовые знания css;
- Базовые знания javaScript;
Пример (потянуть окно браузера):
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
HTML код:
<div class="cntn">
<div class="block">блок 1</div>
<div class="block">блок 2</div>
<div class="block">блок 3</div>
<div class="block">блок 4</div>
<div class="block">блок 5</div>
</div>
Мы создаём для контейнера ".cntn" дополнительный класс, т.е. мы не будем задавать ширину для каждого дива ".block". В случае, если у нас будет около сотни блоков, то это позволит значительно экономить ресурсы браузера.
CSS код:
.block { float: left; }
.wid20 .block { width: 20%; }
.wid25 .block { width: 25%; }
.wid33 .block { width: 30.3%; }
.wid50 .block { width: 50%; }
.wid100 .block { width: 100%; }
Для использования javascript кода нужно включить библиотеку query.
js код:
$(document).ready(function(){
var constructor = function(){
$('.cntn').removeClass('wid20').removeClass('wid25').removeClass('wid33').removeClass('wid50').removeClass('wid100');
$('.cntn').addClass('wid'+width_prj);
};
var sizer = function() {
widthThis = $('.cntn').innerWidth();
if (widthThis <= 300) {
width_prj = 100;
constructor();
} else if (widthThis <= 500) {
width_prj = 50;
constructor();
} else if (widthThis <= 700) {
width_prj = 33;
constructor();
} else if (widthThis <= 900) {
width_prj = 25;
constructor();
} else if (widthThis >= 900) {
width_prj = 20;
constructor();
};
}; sizer();
$(window).resize(function() {
sizer();
});
});
Пример работы скрипта можно увидеть на главной странице моего сайта.