Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 11.10.2018, 16:18   #1
LarionovaA
Новичок
 
Регистрация: 03.10.2018
Сообщений: 1
Репутация: 10
По умолчанию Как сделать колонки одинаковой резиновой высоты?

Всем привет. В общем, не могу разобраться с divaми. Необходимо в каждую колонку блочной верстки вставить в каждый угол по изображению. Колонки три. Итого 12 изображений. Ширина колонок 20%/*/200px, высота подстраивается под содержимое, одинаковая у всех трех колонок. https://codepen.io/larionovaa/pen/pxPXEq. Вот с высотой разобраться не могу
Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div with balls</title>
    <link href="style.css" rel="stylesheet" >
</head>
<body>
    <div>
       <div class="header">Привет участникам соревнований!</div>
       <div class="middle">
        <div class="menu">
            колонка-25% колонка-25% колонка-25% колонка-25% колонка-25%
            колонка-25% колонка-25% колонка-25% колонка-25% колонка-25%
            колонка-25% колонка-25% колонка-25% колонка-25% колонка-25%
        </div>
        <div class="column">
            колонка-200px колонка-200px колонка-200px
            колонка-200px колонка-200px колонка-200px
        </div>
        <div class="content">
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
            колонка-* колонка-* колонка-* колонка-* колонка-*
           </div> 
        <div class="none"></div>
    </div>
    <div class="footer"><br>Главное не победа, а участие!</div>
</div>  
</body>
</html>

Код:

.header {
text-align: center; 
padding: 10px;
background-color: lightblue; 
text-transform: uppercase;
color: blue;
font-size: 22px;
}
.menu, .column, .content {
background: url(http://fe.it-academy.by/Examples/ball3.png) top right no-repeat, 
url(http://fe.it-academy.by/Examples/ball3.png) 
top left no-repeat, 
url(http://fe.it-academy.by/Examples/ball3.png) 
bottom right no-repeat, 
url(http://fe.it-academy.by/Examples/ball3.png) 
bottom left no-repeat;
height: auto; 
background-size: 40px;
}
.menu {
float: left; 
width: 20%;
height: auto;
background-color: cyan
}
.column {
float: right; width: 200px;
background-color: lightgreen;
 
}
.content {
background-color: yellow;
overflow: hidden;
margin-left: 20%;
padding: 10px;
}
.none {
clear: both;
}
.footer {
background-color: lightblue; 
height: 65px; 
font-size: 22px; 
color: blue; 
text-transform: uppercase; 
text-align: center
}

LarionovaA вне форума   Ответить с цитированием
Старый 11.10.2018, 19:43   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,685
Репутация: 2066
По умолчанию

1. старый способ: через display: table
2. относительно старый: через display: grid
3. относительно новый: через display: flex
Погугли что тебе проще, сравни поддержку браузеров и пили. Возникнут вопросы по любому из способов — пиши.

UPD: забыл указать днищенский способ: 0. верстать таблицей
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Контроль высоты средней колонки siavko HTML и CSS 5 06.11.2016 13:02
Как сделать вывод новостей в 2 колонки и постранично в wordpress? MrBrain WordPress и другие CMS 0 29.05.2013 16:35
Как сделать равные по длине колонки? Shaddad HTML и CSS 14 06.01.2013 23:28
колонки одной высоты neg5 JavaScript, Ajax 4 13.02.2012 20:20
Блоки div вместо td, как сделать две колонки одинаковой высоты? v.victoria12345 HTML и CSS 0 06.05.2009 18:05


17:24.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru