Как сделать блоки одинаковой высоты css

Колонки (div и др.блоки) одинаковой высоты | CSS

Как сделать в таблице отступы только между ячейками

Жаль, border-spacing (там пример) устанавливает отступ не только между ячейками, но и от краёв таблицы до ячеек. Поэтому для того, чтобы увеличить расстояние между колонками, приходится подвинуть дочерние элементы с помощью transform: translate.

Три колонки равной высоты, но разной ширины

Стиль CSS будет тот же. А HTML можно варьировать. Можно задать каждой колонке свою ширину и отступ как в процентах, так и в пикселях.

Хм, сейчас запутаю вас окончательно, нужно было просто взять div. HTML выше подходит для: Структура блога: вид статьиНо не для структура блогаТак выглядит Главная страница или страница тегов. Тут вместо article нужно использовать section, у которого будет несколько потомков article. То есть статья — это article. Несколько статей объединяются в section.

12 комментариев:

Igor Zeleny Спасибо. NMitra Пожалуйста! Igor Zeleny Проверил в Opera не работает, не понимает transform: translateX даже с префиксом -o- NMitra А с -webkit- ? Сейчас Опера перешла на движок Хрома. После этого я Оперу снесла. Здесь примеры поддерживаются http://shpargalkablog.ru/2011/09/transform-css.html ? Igor Zeleny Переустановил Оперу, все ОК. Это у меня какая то старая версия была.
Еще раз спасибо 🙂 Анонимный Hi there very colol website!! Man .. Beautiful ..
Amazing .. I will bookmark your web site and take the feeds also?
I am satisfied to search out a lot of helpful info right here within the publish, we'd like develop more strategies inn this regard, thanks foor sharing.
. . . . . NMitra Не поняла, что значит "we'd like develop more strategies inn this regard, thanks foor sharing". Юрий Наташа, спасибо огромное за инфу. Уже давно искал способ реализации такой функции. К сожалению, не понял двух моментов.

Зачем во втором примере ("Как сделать в таблице отступы только между ячейками"):

1) для main прописано border-spacing (вы задаете расстояние между границами ячеек)?

Как сделать картинки в одинаковой высоты и ширины блоки

Как это сделать? Разные размеры картинок?а блоки одинаковые и получается у меня разная высота, а должна быть одинаковая, и чтобы картинки подстраивались.

Поместить их в фон и задать background-size: cover :

Полагаю, это должно решить проблему

Вместо 150px укажите свои размеры блоков

Надеюсь вы это имели введу вам нужно к классу картинки добавить width:100%; height:100%;

Не обязательно их ставить внутри блоков. если должен быть такой простой ряд картинок. Если без блоков никак, это дело можно организовать так:

Вопрос, зачем добавлять лишний код, если на выходе должно получиться то же самое) У тегов img (и всех остальных одиночных) есть минус — у них нет псевдоэлементов :before и :after

Как сделать три блока одинаковой высоты в CSS с отступами?

Как создать три резиновых блока одинаковой высоты, чтобы контур был как на картинке? Испробовал различные варианты, не получается найти решение. С таблицей почему-то не получается добиться одинакового контура по высоте. Изначально пробовал этот html, потом пробовал добавлять обертки: С кругами сложности нет, только с обводкой на резиновых блоках.

Вариант с использованием display: table

Для отступов используем border-spacing

Таблицу делим на колонки равной ширины с помощью table-layout: fixed

Ширина колонок в этом случае определяется либо с помощью тега <col> , либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

Могу предложить реализацию этой проблемы с помощью flexbox. Так блоки выйдут более гибкими. Так же я установлю фиксированную высоту для .text , что бы вы увидели, что высота родительского блока остаётся одинаковой (можно фиксированную высоту убрать):

Проблема была с padding’ом , сейчас все работает. Когда вы в блок добавляете padding , это всегда за счет ширины, и тогда блок не встает на свое место.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *