AlexWeb
-
Posts
24 -
Joined
-
Last visited
AlexWeb's Achievements
-
-
Папку то покажете?
-
Путь к картинке задается относительно html файла. Скрины папки с проектом в студию.
-
Обманщик!
-
Может картинка лежит в папочке image?)
-
формат?
-
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
http://pixs.ru/showimage/sdfhjpg_6291544_28615315.jpg http://pixs.ru/showimage/hsgkgflghj_3085492_28615331.jpg Без отступов так себе... Но опять же можно обыграть от соседних элементов. Этот код, если что <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style> .container { background-color: red; } img { float: left; margin-top: -1em; margin-left: -1em; margin-right: 1em; } p { margin: 1em; margin-bottom: 0; float: left; background-color: green; } </style> </head> <body> <div class="container"> <p> <img src="http://placekitten.com/200/200?image=6"> текст </p> <div style="content: '';clear: both; height: 0;"></div> </div> </body> </html> margin-bottom: 0; можно убрать у p и появится рамка снизу, если что -
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
Прям вот так, как вы хотите - наверно, не получится. Если нужно достичь обтекания картинки, то это в любом случае float. А если его использовать то придется ставить распорку, что бы убрать обтекание для других элементов и нормального отступа снизу для p. А чем мешает рамка снизу? Если посмотреть на общую картину, то можно еще как-нибудь обыграть, не трогая эту рамку. Там все равно будет торчать либо блок либо рамка текста. Отрицательный margin на картинке заставит текст заползать под картинку. Так что вариантов всего 3: Отказаться от обтекания. Обыграть рамку относительно других элементов. Не поддерживать ie7 ))) (Зачем вообще нужна его поддержка?) http://pixs.ru/showimage/fdhsdhjpg_5771743_28615232.jpg Это с маленьким текстом тоже самое. Никак от этого не избавиться. Причину описал выше. Либо будет зеленый padding от p, либо вот этот красный блок из-за margin p. Отрицательный отступ у картинки заставит текст заезжать под него. -
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
http://pixs.ru/showimage/fg235iyjpg_1471688_28614787.jpg Так? -
Для этого можно использовать относительные единицы измерения em rem. Откажитесь от вашей затеи пока не поздно))
-
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
Если у распорки высота не 0, то возможно это и был ваш загадочный отступ. Но это же легко инспектится... -
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
У меня начинает подгорать)) Разукрашка: красный - это div зеленый - это p делаем то, что я вам скинул в 2х вариантах (много текста, мало текста) http://pixs.ru/showimage/dagf1taskj_1490523_28604972.jpg http://pixs.ru/showimage/2taskjpg_2536133_28604978.jpg делаем волшебство http://pixs.ru/showimage/task3jpg_5104466_28604986.jpg http://pixs.ru/showimage/task4jpg_2167806_28604990.jpg Какой вариант нам нужен? Если нам нужен 2й вариант, то вот код <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style> div { overflow-y: hidden; height: auto; border: none; background-color: red; } img { float: left; margin-right: 10px; } p { /*margin: 1em;*/ float: left; background-color: green; } </style> </head> <body> <div> <p> <img src="http://placekitten.com/200/200?image=6"> Текст </p> <div style="clear: both; content: ''; height: 0;"></div> </div> </body> </html> Как можно понять, ваш margin тупо закоменчен, потому что он работает во все стороны. Распорка в подарок) -
ну у вас 4+4+4+4=12 Адаптива пока еще нет, как я понимаю? Попробуйте разбить на 2 row. Все отображается правильно, просто lg не хватает в данном случае. Но 2 row решат вопрос без лишних классов для сетки. И применять свои стили к блокам col не лучшая идея
-
<div id="SECTION_2"> <div id="DIV_3"> <button id="BUTTON_1"> Расширенный поиск </button> </div> <div id="DIV_4"> <button id="BUTTON_2"> Пакетное предложение </button> </div> </div> body { background-color: blue; } #BUTTON_1, #BUTTON_2 { padding:1%; font-size: calc( (100vw - 240px)/(1100 - 240) * (20 - 8) + 8px); background-color: blue; color: rgb(255, 255, 255); cursor: pointer; width:50%; min-height:50px; margin: 0 3% 0; } #DIV_3, #DIV_4 { float:left; width: 50%; } #DIV_3 { text-align: right; } #DIV_4 { text-align: left; } Примерно так)))
-
Проблема в свойствах width и calc, а точнее в том, как вы их применяете. Не надо так, пожалуйста font-size: calc( (100vw - 240px)/(1100 - 240) * (20 - 8) + 8px); В итоге ваша математика сюда не влезла width:30% ; Воспользуйтесь медиа запросами. В них вы сможете отрегулировать размер шрифта, а также ширину, отступы, рамки блоков и их положение относительно друг друга. Также рекомендую посмотреть как верстают резиновые макеты на Ютубе. У вас получилась слишком резиновая резина, которую тяжело контролировать. Смысл заключается в том, что бы текст был читаемым на любом разрешении, а не соответствовал ширине экрана. P.S. А вообще такие скачки блоков происходят из-за того, что они со свойством display: inline-block. Начинают подстраиваться друг под друга. Если вы все же хотите довести этот пример до ума...