sarcus
-
Posts
8 -
Joined
-
Last visited
sarcus's Achievements
Explorer (1/14)
0
Reputation
-
Flex-контейнер с input элементами расширяет границы основного блока
sarcus replied to sarcus's question in HTML Coding
Работает! -
Flex-контейнер с input элементами расширяет границы основного блока
sarcus posted a question in HTML Coding
Основной блок содержит 2 блока 1-й с некоторым текстом 2-й flex блок с input элементами 2-й блок как будто не видит <b>ширины</b> основного блока, которую <b>задает 1-й блок</b> (sometext) и расширяет основной. Подскажите как решить данную проблему ? Пример : https://jsfiddle.net/sarcus/1vmaf3wo/14/ Но если вместо input (class='inp') вставить div то все приходит в норму: https://jsfiddle.net/1vmaf3wo/83/ <style> .cont { position: absolute; top : 200px; left: 30px; border: 1px solid #ccc; } .ctrl { display: flex; width: 100%; flex-direction: row; border: 1px solid#ccc; } .btn { flex: 0 0 auto; } .inp { flex: 1 1 auto; width: 100%; } </style> <div class="cont"> <div class="sometext">555 5555 5555 5555 5556</div> <div class="ctrl"> <input type="button" class="btn" value="<<" /> <input class="inp" type="text" /> <input type="button" class="btn" value=">>" /> </div> </div> -
Расстягиваем внешний div самым внутренним по высоте
sarcus replied to sarcus's question in HTML Coding
Жаль конечно, нет красивого решения. Большое спасибо за ответы. Просто задачка интересная, но не для ie8. -
Расстягиваем внешний div самым внутренним по высоте
sarcus replied to sarcus's question in HTML Coding
Ну только что, думал можно как-то иначе, всю голову сломал Но таблицами ie8 не хочет растягивать внутренние дивы, у меня не получилось, и в твоем примере так же, а у меня он еще есть, так бы забил. -
Расстягиваем внешний div самым внутренним по высоте
sarcus replied to sarcus's question in HTML Coding
Не то. Изначально высота внутреннего блока должна быть 100% от высоты экрана. Далее, в зависимости от контента, растягиваем внешний блок. (+ поддержка ie8) -
Есть вложенные блоки <div id="d1"> <div id="d2"> <div id="d3"> ....... </div> </div> </div> Нужно чтобы все блоки имели высоту 100% и самый внутренний div (он может быть и 4-м... вложением) растягивал все внешние в зависимости от контента если контент больше 100%. Желательно без js.
-
о_О Верстайте таблицами. Таблицами не получиться красиво сделать. Ну и на счет ботов. Не могу спать спокойно когда они существуют Да и самому стало интересно голову сломать. Но сделал. Долго мучился. Решил отрицательным margin-top-ом и манипуляции с прозрачными border-ми (Вывел внутренний блок .ele за границы внешнего .wrap). Стал делать меню, для чего все это и нужно было. Меню полностью прозрачное что мне и нужно было (под ним фон будет с рисунком). Элементы пока подсветил чтобы видеть что получается. Можно конечно проще, например с помощью картинок, но у меня другая задача. <!DOCTYPE html PUBLIC><html><head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"></head><style type="text/css" media="all"> body {font-family: Arial, Tahoma, sans-serif; margin: 10px; font-size: 12px;} ul, li { list-style: none; list-style-type:none; list-style-image:none; list-style-position:outside; margin:0; padding:0; vertical-align : top;} ul li { line-height: 18px; padding-top: 10px; zoom: 1;} ul li.next { padding-top: 0px; }.wrap { border-style: solid; border-width: 1px 1px 0 1px; border-color: transparent transparent red red; display: block; positon:relative; _border-top-color: #ff00ff; _filter:chroma(color=#ff00ff); _height: 1px; zoom:1; zmargin: 0 0 0 14px; }.ele { position:relative; margin:-10px 0 0 0; padding : 0 0 4px 10px; zoom:1;}.ele.next { margin: 0;} .ele:after { content: ''; display: block; clear: both;}.ele p { top: 10px; background-color:#ffcccc; display:block; position:relative; float:left; margin: 0;} .bl { position: absolute; width: 8px; border: solid green; border-width: 1px 0 0 0; ; }</style> <body><ul><li> <div class="wrap"> <div class="ele"><p>ddfffff через через через через через</p></div> <div class="bl"></div> </div></li><li class="next"> <div class="wrap"> <div class="ele next"><p>ddfffff через через через через через</p></div> <div class="bl"></div> </div></li></ul></body></html>
-
<style type="text/css"> .div1, .div2 { display: block; line-height:14px; border: solid gray; border-width: 0 0 0 1px;}.div1 { background-color: #ffcccc; }.div2 { background-color: #fffccc; }</style><div class="div1">текст текст текст текст текст</div><br /><div class="div2">текст текст текст текст текст</div>Задача такая. Есть два блока одинаковой высоты (14). Нужно чтобы у верхнего блока, левая рамка была с регулируемым отступом сверху, т е высота рамки меньше чем у нижнего. При переносе текста рамки растягиваются. Оба дива будут прозрачными без фона; Добавлено через 8 минут Должно работать в IE6-..... есть у меня еще такие .