Блоки в ряд, адаптация по ширене экрана
251
18 апреля 2017, 07:07
Помогите расположить три блока в строку на всю ширину экрана, так, чтобы левый и правый имели фиксированную ширину, а средний адаптивно сжимался до min-width. И чтобы они были намертво приклеены друг к другу.
<div style="width: 100%; height: 100px;">
<div style="width: 100px;">1</div>
<div style="min-width: 500px">2</div>
<div style="width: 200px;">3</div>
</div>Answer 1
Один из вариантов с float'ами (прибить й-ый и 3-ий по краям, а среднему дать оставшееся место):
.wrapper {
width: 100%;
height: 100px;
min-width: 700px;
}
.div-1 {
float: left;
background: #FDD;
width: 100px;
}
.div-3 {
float: right;
background: #DFD;
width: 100px;
}
.div-2 {
min-width: 500px;
margin: 0 100px 0;
background: #EEF;
}<div class="wrapper">
<div class="div-1">1</div>
<div class="div-3">3</div>
<div class="div-2">2</div>
</div>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47954 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23929 visits
- Как через css изменить цвет png изображения? 10409 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9283 visits
- Работа с captcha vk api 8149 visits
© "hostciti.net" 02.4.2025 | 01:04