Авто-изменение ширины div'a

@yellowyellow · Регистрация: 01.02.2014

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

имеется 3 div'a. 2 из них расположены по краям страницы и имеют фиксированый размер, между ними расположен еще один div, который необходимо изменять в зависимости от разрешения экрана, так как при уменьшении разрешения расстояние между крайними div'aми сокращается. подскажите, как решить проблему. спасибо!

@fol · 19.10.2015, 02:51

HTML5
1
2
3
4
5
<div class="wrap">
  <div class="div1" style="border:1px solid green"></div>
  <div class="div2" style="border:1px solid orange"></div>
  <div class="div3" style="border:1px solid red"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrap{
    display:table;
    width:100%;
}
.div1{
    width:200px;
    min-width:200px;
    height:200px;
    display:table-cell;
}
.div2{
    height:200px;
    display:table-cell;
}
.div3{
    width:200px;
    min-width:200px;
    height:200px;
    display:table-cell;
}

@yellowyellow · 20.10.2015, 01:32 **[ТС]**

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

@Fourd · 20.10.2015, 07:32

CSS
1
2
3
4
.div2 img {
    max-width: 200px;
    max-height: 200px; 
}

Добавлено через 2 минуты
за основу будет брать большее значение

@fol · 20.10.2015, 08:43

Сообщение от yellowyellow

как сделать, что бы размер изображение подстраивался под размер данного окна

CSS
1
2
3
img{
width:100%;
}

@yellowyellow · 21.10.2015, 00:40 **[ТС]**

с изображение внутри блока все получается, но есть один нюанс:

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
56
57
58
59
60
<div class="wrap">
  
 
 
<div class="div1" style="border:1px solid green">
</div>
 
  <div class="div2" style="border:1px solid orange"><div id="featured"> 
            <img src="11.jpg" alt="" height="250px" width="600px"/>
            <img src="22.jpg" alt="" rel="" height="250px" width="600px"/>
            <img src="44.jpg" alt="" rel="" height="250px" width="600px"/>
            <img src="55.jpg" alt="" rel="" height="250px" width="600px"/>
            <img src="33.jpg"  alt="" rel=""height="250px" width="600px"/>
        </div> </div>
  
 
 
 
<div class="div3" style="border:1px solid red">
 
 
</div>
</div>
 
<style>
.wrap{
    display:table;
    width:100%;
}
.div1{
   width:250px;
vertical-align: top;
text-align:center;
font-size:50px;
    display:table-cell;
}
.div2 img {
    max-width: 600px;
    max-height: 250px; 
}
.div3{
vertical-align: top;
  width:235px;
height:250px;
padding:0;
    display:table-cell;
}
img{
width:100%;
height:100%;
}
 
</style> 
 
 
 
<style type="text/css" class="center">
            #featured { width: 600px; height: 250px;   url('orbit/loading.gif') no-repeat ; overflow: hidden; }
    
        </style>

В див2 стоит слайдер, который никак не хочет поддаваться автоматическому изменению ширины

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .

@yellowyellow 0 / 0 / 0 Регистрация: 01.02.2014 Сообщений: 6

	Авто-изменение ширины div'a 18.10.2015, 23:30. Показов 967. Ответов 5 Метки нет (Все метки) имеется 3 div'a. 2 из них расположены по краям страницы и имеют фиксированый размер, между ними расположен еще один div, который необходимо изменять в зависимости от разрешения экрана, так как при уменьшении разрешения расстояние между крайними div'aми сокращается. подскажите, как решить проблему. спасибо! 0

@yellowyellow 0 / 0 / 0 Регистрация: 01.02.2014 Сообщений: 6
	20.10.2015, 01:32 [ТС]
	а если поместить изображение внутрь второго дива, как сделать, что бы размер изображение подстраивался под размер данного окна? 0