Loading...
KristianZanev avatar KristianZanev 16 Точки

[Web Fundamentals] HTML FORMS & STYLING - 4.Free Account

https://codepen.io/dodospambot/pen/pwpPZo

Здравейте, проблемът ми е следния с конкретната задачка. В main елемента съм добавил 2 секции - лява и дясна, те съдържат input-и. И когато задам в CSS секциите да се display-ват като block, фонът на main елемента спира да обхваща секциите. Защо? Много лесно мога да оправя проблема като не ги правя block-oве и задам определен height на main и задачката ще добие желания вид, но смятам, че това е по-правилния вариант и не мога да си обясна защо не работи? Ще съм благодарен ако някой обърне внимание на въпросът ми.

Тагове:
-1
Web Basics 29/06/2017 21:02:20
idmitrov avatar idmitrov 55 Точки
Best Answer

Привет,

трябва ти следното:

main:after {
    content: '';
    display: block;
    clear: both;
}

 

Проблемът е, че след като си float-нал 2-те секции трябва след последната да clear-неш.Преди това се правеше с празен елемент, сега в css3 можеш да ползваш pseudo selectors, като :before и :after.

 

https://css-tricks.com/all-about-floats/

1
28/06/2017 20:53:04
KristianZanev avatar KristianZanev 16 Точки

Проработи, благодаря! Беше ми минало през ума, че е възможно да се оправи от clear float, но реших първо да опитам да float-на 2 празни  div тага с display-block в main и фона му си ги покриваше както си трябва.  Странно и за това реших, че проблема идва от някъде другаде. Все още не мога да си го обясня. Как точно clear float-a оправя проблема... 

0
idmitrov avatar idmitrov 55 Точки

Привет надявам се това да ти помогне да доизясниш нещата: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Това, което трябва да запомниш е, че след като float-неш даден елемент, си представи, че си го позиционирал абсолютно спрямо неговият parent т.е елементът вече не е wrap-нат в parent-a и за това не го разпъва с неговата височина. ако искаш да clear-неш parent ползваш pseudo selectors, ако искаш да clear-неш елемента до/преди него apply-ваш clear на даденият елемент.

 

0
28/06/2017 22:41:51
KristianZanev avatar KristianZanev 16 Точки

Да, стана ми по-ясно. Благодаря ти отново за отделеното време!

0
KristianZanev avatar KristianZanev 16 Точки

Като се натиска dislike е хубаво поне да се коментира причината за натискането на този бутон..... Знам, че може би не задавам най-умният въпрос, но не мисля, че е уместно така да се дислайква без никакъв feedback. Човек да не смее да задава въпроси в този форум...

2
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.