Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

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

Всем привет. В общем, не могу разобраться с 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, 18:43   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

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

UPD: забыл указать днищенский способ: 0. верстать таблицей
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Контроль высоты средней колонки siavko HTML и CSS 5 06.11.2016 12: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