Подскажите, пожалуйста, правильно ли я сделал верстку:
Нужно div слева шириной 32пикселя, справа 250, а межну ними на все свободное пространство третий див div
Я сделал вот так:
https://jsfiddle.net/t9dm42pL/1/
_____________
Одесса - мой город!)))
Полная Версия: три блока, центральный разтянуть по ширине
Ты уж определись с шириной среднего блока:
А если узкий экран, то ширина среднего будет 200px и блоки начнут переползать ниже - это то, что ты ожидаешь?
Опять же, общая ширина 3-х блоков какая будет? 32px + (100% - 300px) + 2*5px + 250 px = 100% - 300px + 292px = (100% - 8px) - это то, что ты хотел получить или у тебя в сумме должно было быть все-таки 100%?
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
min-width:200px;
width:auto;
padding:5px;
width:calc(100% - 300px);
А если узкий экран, то ширина среднего будет 200px и блоки начнут переползать ниже - это то, что ты ожидаешь?
Опять же, общая ширина 3-х блоков какая будет? 32px + (100% - 300px) + 2*5px + 250 px = 100% - 300px + 292px = (100% - 8px) - это то, что ты хотел получить или у тебя в сумме должно было быть все-таки 100%?
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
ну я так, чтобы с запасом... ну ладно, тогда сделаем width:calc(100% - 292px);
Я вот думал, что можно задать ширину в width:calc(100% - 292px);, и добавить min-width чтобы онабыла не меньше 200 при узком экране
_____________
Одесса - мой город!)))
Я вот думал, что можно задать ширину в width:calc(100% - 292px);, и добавить min-width чтобы онабыла не меньше 200 при узком экране
_____________
Одесса - мой город!)))
| Цитата (savelikan @ 12.02.2017 - 23:06) |
| Я вот думал, что можно задать ширину в width:calc(100% - 292px);, и добавить min-width чтобы онабыла не меньше 200 при узком экране |
Можно, конечно. Я ж специально вопрос задал "это то, что ты ожидаешь?". Если это ожидаемое действие, то пусть будет :)
Вообще, можно по-другому сделать. Общая ширина всегда будет равно строго 100% :) Но вот будет ли это согласовываться с твоей концепцией дизайна, смотри сам. И тут еще надо бы задать высоту всем дивам, в первую очередь div.krok_head. Иначе другие элементы, идущие следом за этими, могут налезать на них.
div.krok_head{
width:100%;
position: relative;
}
DIV.krok_back{
background-image: url("images32.png");
background-position: -288px,0px;
height:32px;
width:32px;
position: absolute;
left: 0;
top: 0;
}
DIV.krok_title{
font-size:22px;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
font-weight:bold;
position: absolute;
left: 32px;
top: 0;
}
div.krok_testoption{
position: absolute;
right: 0;
top: 0;
width:250px;
}
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
| Цитата (sergeiss @ 12.02.2017 - 21:10) |
[QUOTE=savelikan,12.02.2017 - 23:06]div.krok_head{ |
Я пробовал так. В таком случае если будет больше текста в krok_title, его правая часть будет за krok_testoption
_____________
Одесса - мой город!)))
Сорри, я тут не дописал правую границу, которая жестко зафиксирует ширину и заставит текст переноситься на другую строку.
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
DIV.krok_title{
font-size:22px;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
font-weight:bold;
position: absolute;
left: 32px;
right: 250px; /* добавь еще вот это!!! */
top: 0;
}
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
Здесь расположена полная версия этой страницы.