‏HTML ئۇستىلىرىدىن ياردەم

ئەسسالامۇ ئەلەيكۇم،

يىقىندا بىر ئىھتىياج تۈپەيلىدىن تۇيۇقسىز HTML دىن بىر دانە كۆرۈنمە يۈزنى چىقىرىشقا توغرا كەلدى، ئەپسۇس مەسىلىگە يولۇقتۇم،
بۇنى بۈگۈن كەچكىچە ھەل قىلىپ چوقۇم تاپشۇرىۋىتىشىم كىرەك، ئەگەر ئۆزۈمنىڭ ئىھتىياجى بولغان بولسا ئۇستازلارنى ئاۋارە قىلمايلا ئۆزۈملا ئىزدەپ مەسىلىنى ھەل قىلغان بولاتتىم،
ئەپسۇس مەن ھازىرقى دەقىقىنىڭ ئۆزىدە ياردەمگە مۇھتاج،

مەسىلە تۆۋەندىكىدەك،
1. يەنى ئىككى دانە DIV بىر بىرى بىلەن قاپلانغان ۋاقىتتا ئىچىدىكى DIV نىڭ margin-top خالىقىغا قىممەت بەرسەك سىرتىدىكىسىگىمۇ تەسىر قىلىدىكەن،

يەنى تۆۋەندىكىدەك



بۇنىڭ سەۋەبى نىمە؟ نىمىشقا بۇنداق بولىدۇ؟

2. بىر دانە div ئىچىگە inline-block خارەكتىرىدىكى ئىلىمىنىتلار مەسىلەن a, span لەرنى قويغاندا مۇشۇ ئىلىمىنىتلارنىڭ margin خاسلىقى ئىشلىمەيدىكەن،

يەنى تۆۋەندىكىدەك



نىمە ئۈچۈن مۇشۇنداق بولىدۇ؟
ئىلمىي ئاساسى بىلەن چۈشەندۈرۈپ بىرەلىگەن بولساڭلار ئىنتايىن مەمنۇن بولاتتىم،

مىنىڭ مەقسىدىم ماۋۇنىڭدەك ئۈنۈمنى چىقىرىش ئىدى



ھىچقانداق رامكا ،ئامبار، JavaScriptئىشلەتسەم بولمايدۇ،  پەقەتلا پەقەت Native html, css لەرنىلا ئىشلىتىشىم شەرىت.

رەھمەت

inline-block خاسلىقىغا ئىگە ئىلىمىنىتلارنىڭ margin قىممىتى ئىشلىمەسلىكى بۇ ئەزەلدىن بار بولغان bug . بۇ مەسىلنى ئادەتتە overflow:hidden نى قوشۇش ئارقىلىق ھەل قىلىمىز .

مەنمۇ بۇ مەسىلىگە دىققەت قىلماپتىكەنمەن. ھازىر سىناپ باقسام راست شۇنداق ئەھۋالغا ئۇچرىدىم.
بۇنى container پاسونىغا padding-top=100px قوشۇش ئارقىلىق، سىز دېگەن ئۈنۈمگە يەتكىلى بولىدىكەن. لىكىن ئېگىزلىكىگىمۇ 100px  قوشۇلۇپ كەتكەچكە، ئېگىزلىكىدىن 100px ئېلىۋىتىپ چىقارسام بولدى. سىناپ بېقىڭ.

oyghanbeg.com يوللىغان ۋاقتى  2017-12-28 17:21
inline-block خاسلىقىغا ئىگە ئىلىمىنىتلارنىڭ margin قىممىتى ئىش ...

رەھمەت سىزگە،
ئاندىن ئىككى دانە div بىر بىرىگە قاپلانغان ۋاقىتتا ئىچىدىكى div نىڭ margin-top نى تەڭشىسەك سىرتىدىكىسىمۇ بىللە ئاستىغا سۈرۈلۈپ چۈشىدىكەن، بۇ بىرىنچى مەسىلە،

بىر div ئىچىدە بىر دانە a خەتكۈچى، بىر دانە img خەتكۈچى بولغاندا a خەتكۈچى img نىڭ ئاستى قىسمىغا چۈشىۋالىدىكەن ھەمدە ئىككىسىدىن خالىغان بىرىنىڭ margin-top نى تەڭشىسەك ئىككىلىسىگە تەڭ تەسىر قىلىپ تۇرىۋالىدىكەن،
بۇنى قانداق ھەل قىلىمىز؟

شەرەر يوللىغان ۋاقتى  2017-12-28 17:03
مەنمۇ بۇ مەسىلىگە دىققەت قىلماپتىكەنمەن. ھازىر سىناپ ب ...

رەھمەت سىزگە

بۇنىڭغا div خەتكۈچىگە دەسلەپتە بېرىلگەن كەڭلىك قىممىتى سەۋەبچىمىكىن. divخەتكۈچى ئىچىدىكى ئۇششاق خەتكۈچلەرنىڭ ئىشلىگەندىكى ئىگەللىگەن كەڭلىكى div خەتكۈچنىڭ كەڭلىكىنىڭ ئالتىدىن تۆت قىسىمىغا تەڭ بولسا كېيىنكى خەتكۈچكە تەسىر قىلمايدۇ. ئەگەر ئۇششاق خەتكۈچنىڭ ئىشلىگەندىكى كەڭلىكى div خەتكۈچىنىڭ كەڭلىكىنىڭ يېرىمىدىن كىچىك ياكى تەڭ بولۇپ قالسا ئىككىنچى ئۇششاق خەتكۈچ بىلەن بېرىكىپ بىرىنچى ئۇششاق خەتكۈچ بىلەن div خەتكۈچنىڭ ئايرىما قىممىتىنى تولۇقلاش يۈزسىدىن بىر دانە قوش گەۋدىلىك خەتكۈچ ھاسىل قىلىۋالىدىغانلىقتىن، بۇ ئۇششاق خەتكۈچنىڭ خالىغان بىرىگە سىز دېگەندەك ئۆزگەرتىش قىلساق بۇ قوش گەۋدىمۇ ئۆزگىرەيدىكەن. ئەگەر ئۇنداق بولمىسۇن دېسەك يۇقارقى ئىنكاسلاردا دېيىلگەندەك بۇ قوش گەۋدىنى بۇزۇۋېتىپ ھەربىر ئۇششاق گەۋدىنى مۇستەققىل خەتكۈچ ھوقۇقىغا ئېگە قىلىشىمىز كېرەك. مېنىڭچە بۇ قەستەن قويۇلغان bug دەپ ئويلىدىم. راست bug  دېگىلىمۇ بولمايدۇ. بۇ دېگەن بەزىدە پايدىلىق تەرەپ.

سىز دېگەن ئۈنۈمگە يىتىش ئۈچۈن ئېگىزلىكىگىمۇ ، ئېگىزلىكىtop:auto  كەڭلىك قىممىتىگە width:100%. سىناپ بېقىڭ.
ياكى بۇنۇڭدەك

    height: auto;
    max-width: 100%;

مەن ئاددىي قىلىپ چۈشەندۈرسەم بۇيەردە قاتلام دىگەن نەرسە با،بىرقاتلامدىكى ئىلمىنىتلار مۇشتا تېپىشىدۇ،fire foxنىڭ بىر ئىقتىدارى باتى 3dھالەتتە قاتلامنى كۆرگىلى بولىدىغان