This layoutКак сделать этот макет в CSS?
Я даже не знаю, как это назвать. «Жидкостные» или «жидкие» столбцы, по-видимому, относятся к простым динамическим высотам. Я сделал это и получил два вопроса: возможно ли это сделать с необработанным HTML5/CSS3? Можно ли заставить его работать на 3, 4, ..., n столбцы ?!
Я понимаю, что вы хотите достичь что-то вроде this
Вы можете использовать Masonry - который является чисто JavaScript & также поддерживает JQuery
или Isotope который является JQuery плагин.
Автор этих плагинов предлагает использовать Isotope.
Большое спасибо! Это то, что мне нужно. Просто любопытством, можно ли получить тот же эффект (без анимации, конечно) с помощью голого CSS? –
Нет, просто с CSS это невозможно, если вы видите [Режимы макета:] (http://isotope.metafizzy.co/docs/introduction.html), это объясняется там. Попробуйте [demo] (http://isotope.metafizzy.co/), изменив размер вашего браузера с помощью опций - showall, original, mansory, вы найдете пробелы, которые фактически удаляются с помощью режимов макета, который использует jQuery. – VenomVendor
Все зависит от того, как вы установите высоты каждого поля для чтения. Если это зависит от содержания, то это всего лишь 2 столбца с шириной жидкости. Если вы поддерживаете отношение высоты к ширине, вам нужно будет использовать js для выполнения математики и поддержания высоты или использовать img для фона width:100%; height:auto; display:block и разместить над ним содержимое position:absolute:.
Да. Это можно сделать с помощью raw HTML5/CSS3. – Ani
Возможно, вы найдете что-то вроде этого полезного - http://mcpants.github.io/jquery.shapeshift/ – CodeMoose