верстка (колонки)

@Tarick · Регистрация: 29.01.2013

Студворк — интернет-сервис помощи студентам

такая ситуация: есть ряд , в нем 2 колонки...как сделать так чтобы правая колонка = высоте левой колонки ? ...Смотрите скрины, а то не знаю как на пальцах это объяснить

(макет и верстка). Это часть проекта...все то,что я сделал в архиве. Я конечно могу маргинами и падингами все растянуть , но это глупо (

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="row ml-3 mt-5">
                        <div class="col-md-7">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title headline my-3">
                                        Watches
                                    </h5>
                                    <img src="img/clock.jpg" class="card-img">
                                    <p class="card-text mt-0">$499</p>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title headline my-3">
                                        t-shirt with print
                                    </h5>
                                    <img src="img/t-shirt.jpg" class="card-img my-4">
                                    <p class="card-text mt-0">$59</p>
                                </div>
                            </div>
                        </div>
 
                        <div class="col-md-5">
                            <div class="card sale-card">
                                <div class="card-body">
                                    <h5 class="card-title headline mt-3 mb-0">
                                        cap
                                    </h5>
                                    <h5 class="card-subtitle headline headline--sale mt-0 mb-3">sale!</h5>
                                    <img src="img/cap.png" class="card-img">
                                        <p class="card-text sales-text pl-5">
                                            $55
                                        </p>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title headline my-3">
                                        glasses
                                    </h5>
                                    <img src="img/glasses.jpg" class="card-img my-2">
                                    <p class="card-text mt-0">$244</p>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title headline my-3">
                                        shoes
                                    </h5>
                                    <img src="img/shoes-1.jpg" class="card-img my-2">
                                    <p class="card-text mt-0">$99</p>
                                </div>
                            </div>
                        </div>
                    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.card{
    border: 1px solid var(--border-content-color);
    border-radius: 7px;
    margin-bottom: 15px;
}
.card-body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.card-text{
    color: #000;
    font-size: 18px;
    font-weight: 900;
}
.card-img{
    max-width: 100%;
}
.sale-card{
    background-color: #f1f1f1; 
}
.sales-text:after{
    content: '$88';
    font-size: 22px;
    font-weight: 600;
    text-decoration: line-through;
    color: var(--sale-alert-color);
}

@novichek_1905 · 09.04.2019, 12:09

Добавьте в свой код, думаю как работает и так понятно

CSS
1
2
3
4
5
6
.col-md-7 .card {
    height: calc(50% - 15px);
}
.col-md-5 .card {
    height: calc(33.333% - 15px);
}

@Tarick · 09.04.2019, 17:37 **[ТС]**

novichek_1905, спасибо , но тут есть единственный недочет - карточки выходят фиксированного размера , а в макете размеры карточек разные

@novichek_1905 · 10.04.2019, 14:15

Tarick, ну вы же понимаете логику? Задайте размеры в процентах для каждой карточки отдельно, в сумме должно быть 100%

CSS
1
2
3
4
5
6
7
8
9
.col-md-5 .card:nth-child(1) {
    height: calc(30% - 15px);
}
.col-md-5 .card:nth-child(2) {
    height: calc(45% - 15px);
}
.col-md-5 .card:nth-child(3) {
    height: calc(25% - 15px);
}

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

@Tarick 1 / 1 / 0 Регистрация: 29.01.2013 Сообщений: 90
	09.04.2019, 17:37 [ТС]
	novichek_1905, спасибо , но тут есть единственный недочет - карточки выходят фиксированного размера , а в макете размеры карточек разные 0

верстка (колонки)

Решение