Report
-
Similar Content
-
By BPOTHOCOK
http://jsfiddle.net/ogb7kbLw/
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title><STYLE>.button-master {border: 1px solid #000;padding: 2px; /* вопрос б *///float: left; /* вопрос в */} .button-slave {padding: 2px;background: #aaa;font-size: 13px;font-weight: bold;border: 1px dashed #fff;color: #fff;}.canvas {display: inline;} canvas {//position: absolute; /* вопрос г *///float: left;}</STYLE></head><body><HEADER></HEADER><SECTION><NAV></NAV><ARTICLE><span class="button-master"><span class="button-slave">Элемент</span></span><div class="canvas"><canvas id="icon01" width="16" height="16" style="border:1px solid red;"></canvas></div><div class="canvas"><canvas id="icon02" width="16" height="16" style="border:1px solid green;"></canvas></div><div class="canvas"><canvas id="icon03" width="16" height="16" style="border:1px solid blue;"></canvas></div></ARTICLE></SECTION><FOOTER></FOOTER></body></html>Несколько вопросов вызывает данный код.
а. Почему элементы изначально позиционированы не ровно, здесь какой тип элементов canvas или span не ровный по высоте?
На jsfiddle они ровные, что странно, проверьте всё-же в IE.
Далее по порядку, каждый вопрос это закомментированный в коде стиль, применяется только отдельно, но не все сразу.
б. Для .button-master padding два пикселя. Почему если его закомментировать .button-slave по высоте выходит за границы родительского элемента .button-master?
в. Почему если раскомментировать float для button-master тогда элементы все ровняются, но по верхнему краю?
г. Почему если раскомментировать position для canvas, эти элементы ровняются по центру, что мне и нужнее всего. Но при этом они создают коллапс, все позиционируются в одно место, один в другой.
Какое решение здесь можно применить?
UPD. Определил способ позиционировать canvas. Установить для canvas position: relative; и далее позиционировать по высоте top; относительно родительского div. Но всё-же интересуют все соображения по вопросам.
-
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-