Делаем колонки одинаковой высоты с помощью JS
Есть много способов сделать колонки одинаковой высоты, но самый удобный для меня — с помощью js
// Make all the columns of the same height function setEqualHeight(columns){ var tallestcolumn = 0; columns.each( function(){ currentHeight = $(this).height(); if(currentHeight > tallestcolumn){ tallestcolumn = currentHeight; } }); columns.height(tallestcolumn); } setEqualHeight($(".column"));
Высота задается для блоков .column
внутри родителя с классом .columns-wrap
(вы можете использовать другие классы и родителя). Можно использовать даже несколько таких блоков с колонками, копируя и изменяя только последнюю строку — вызов функции со своими параметрами.
В моем примере для такой структуры HTML (у вас он может быть любой другой, с другими классами или другим количеством колонок):
<div class="columns-wrap"> <div class="column">...</div> <div class="column">...</div> <div class="column">...</div> <div class="column">...</div> </div>
Для моего примера прописаны такие стили (стили так же не являются обязательными, дайте волю фантазии):
.columns-wrap { font-size: 0; } .column { box-sizing: border-box; padding: 20px; font-size: 16px; display: inline-block; vertical-align: top; width: 24%; margin: 0.5%; background-color: #ddd; } .columns-wrap div p { margin: 0; padding: 10px; background-color: #fefefe; } @media only screen and (max-width: 768px) { .column { width: 49%; } }
В чем минус этого решения — что высота блока рассчитывается при загрузке страницы, и поэтому при изменении ширины экрана, нужно обновить страницу, чтобы высота блоков просчиталась по новой. То есть, это проблема только при тестировании адаптивности, а на пользовательских экранах при статической одинаковой ширине окна проблем возникнуть не должно.
Примитивный пример (при включении вкладок HTML, SASS или JS нажмите в нижнем правом углу кнопку RERUN):
See the Pen Columns Same Height by Denis (@deniscreative) on CodePen.0
Для Bootstrap3 можно кастомизировать сетку под 960px с помощью кастомайзера http://getbootstrap.com/customize/. меняем @container-large-desktop с (1140px…
Нашел очень крутой пример валидации HTML-форм без Javascript и без PHP, оригинальная статья выложена здесь….
[vc_message color=»alert-success»]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью: Как…
Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо…