Подобрать CSS или использовать Javascript

@Tester64 · Регистрация: 22.05.2013

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

Гуру, помогите новичку!

CSS vs JavaScript!!!

есть div внутри которого еще три div.

1) прижат к левому краю с фиксированной шириной
2) прижат к правому краю с фиксированной шириной
3) растянут между первыми двумя. Может менять ширину вместе с броузером. Остальные не двигаются.
Но средний не меньше 10px, после чего внешний div перестанет сжиматься (можно попробовать задать min-width?)...

Вроде знаю как подобное сделать на таблицах(три столбца), но нужно именно на div!

И еще...чтобы не случилось они ДОЛЖНЫ идти в три столбца! У меня при сильном сжатии один оказывался под остальными...

Вообще возможно такое? На чистом CSS? без javascript с вычислением размеров? (Да? Нет?)

У меня тупик! Или очень глубоко учу тонкости CSS и ищу вариант (которого может и не быть) или сразу пишу на javascript!!!

@vitsuk · 18.12.2015, 01:35

Tester64, не совсем понятно что вы хотите!! сделайте ширину в процентах!!

@Tester64 · 18.12.2015, 02:14 **[ТС]**

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

сделайте ширину в процентах!!

2 крайних столбца-дива должны быть ФИКСИРОВАННОЙ ширины! например 80px и 30px! "Плавать" должен лишь средний див! Но даже при критическом сжатии они должны просто перестать сжиматься! А не прыгать один под другой!

Если задаю все фиксированными размерами - работает! теоретически могу вычислять и проставлять их через яваскрипт. Вопрос - можно ли обойтись без яваскрипт на этом этапе??? По идее CSS спасет кучу часов рассчетов и десятки операций... И уверен что мерцать не будет при пересчете...

Но вот возможно ли подобное без яваскрипт???

Еще раз:
общий див: ширина 500px, но может меняться
левый: 80px - ВСЕГДА
правый 30px - ВСЕГДА
средний - расчитываем 500-80-30=... 390px... но 100% места свободного от других дивов...
Если средний сжался до 10, то общий больше не должен сжиматься! min-width(?)=80+30+10=120px

@vitsuk · 18.12.2015, 02:33

Tester64, Скиньте код я посмотрю!

Добавлено через 4 минуты

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

общий див: ширина 500px, но может меняться

max-width 500 !important
min-width 120px !important

@Tester64 · 18.12.2015, 03:45 **[ТС]**

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

Скиньте код я посмотрю!

НЕТ кода! я только пытаюсь НАЧАТЬ!
Мне нужно понять возможна ли подобная конструкция на CSS или нет?
Основа такая:

HTML5
1
2
3
4
5
6
7
8
9
10
11
    <div style="background-color:#00DDDD; height:300px; width:100%; padding:5px;">
        <div style="background-color:#DDDD00; float:left; height:299px; width: 60px; display: inline;">
            левое
        </div>
        <div style="background-color:#DD00DD; float:left; height:299px; width:50%; display: inline; ">
            центр
        </div>
        <div style="background-color:#DDDDDD; float:right; height:299px; width: 80px; display: inline;">
            правое
        </div>
    </div>

Надо чтобы центр был всегда растянут на весь "остаток" от внешнего див!

Не по теме:

Идея была взята из анализа редактора ACE (на яваскрипт). Он создает дивы на каждую строку, курсор(даже мигание на яваскрипт указанием параметра диву), скролинги, зону ошибок, зону номерации строк... Мне нужно то-же, но сильно упрощенное! инфа по строкам слева и справа, по каждой строке, в фиксированых "столбиках"... Столбцы можно скрывать одним параметром видимости "столбца" (а не перебирать каждую строку). В центре сами строки! Но пока добился того что при сильном сжатии (уменьшаю окно броузера) блоки прыгают один под другой. На текстовый вьювер уже не похоже... Там этого как-то добились! Но похоже у каждого дива указаны высота и ширина... Я все еще надеюсь обойтись без расчетов!

@vitsuk · 18.12.2015, 09:27

Tester64, Значит так все возможно ))

уберите для начала float у всех блоках, центральному блоку дайте width: 100%; и вместо display: inline; переделайте display: table-cell;, и фиксированную ширину min-width

@Tester64 · 18.12.2015, 16:42 **[ТС]**

Спасибо! СРАБОТАЛО!

Новые блоги и статьи Все статьи Все блоги /
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию 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" Извлеките архив и вы увидите. . .

@Tester64 420 / 357 / 47 Регистрация: 22.05.2013 Сообщений: 2,518

	Подобрать CSS или использовать Javascript 18.12.2015, 01:19. Показов 1223. Ответов 6 Метки нет (Все метки) Гуру, помогите новичку! CSS vs JavaScript!!! есть div внутри которого еще три div. 1) прижат к левому краю с фиксированной шириной 2) прижат к правому краю с фиксированной шириной 3) растянут между первыми двумя. Может менять ширину вместе с броузером. Остальные не двигаются. Но средний не меньше 10px, после чего внешний div перестанет сжиматься (можно попробовать задать min-width?)... Вроде знаю как подобное сделать на таблицах(три столбца), но нужно именно на div! И еще...чтобы не случилось они ДОЛЖНЫ идти в три столбца! У меня при сильном сжатии один оказывался под остальными... Вообще возможно такое? На чистом CSS? без javascript с вычислением размеров? (Да? Нет?) У меня тупик! Или очень глубоко учу тонкости CSS и ищу вариант (которого может и не быть) или сразу пишу на javascript!!! 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	18.12.2015, 01:35
	Tester64, не совсем понятно что вы хотите!! сделайте ширину в процентах!! 0

@vitsuk 31 / 24 / 5 Регистрация: 15.11.2015 Сообщений: 140
	18.12.2015, 09:27
	Сообщение было отмечено Tester64 как решение Решение Tester64, Значит так все возможно )) уберите для начала float у всех блоках, центральному блоку дайте width: 100%; и вместо display: inline; переделайте display: table-cell;, и фиксированную ширину min-width 1

@Tester64 420 / 357 / 47 Регистрация: 22.05.2013 Сообщений: 2,518
	18.12.2015, 16:42 [ТС]
	Спасибо! СРАБОТАЛО! 0

Подобрать CSS или использовать Javascript

Решение