كيف يمكنني إنشاء تخطيط صفحة ويب سريع الاستجابة باستخدام "display:inline-block"؟

Question

أريد إنشاء صفحة ويب سريعة الاستجابة من البداية، فقط ملف HTML واحد وملف CSS واحد.كان المقصود من هذا أن يكون تمرينًا قصيرًا، لكن اتضح أنني قللت من شأن التعقيد.

التصميم بسيط.رأس، رئيسي، شريط جانبي وتذييل.يجب أن يكون للشريط الجانبي عرض ثابت ويجب أن يستخدم المحتوى الرئيسي بقية المساحة الأفقية.يجب أن يختفي الشريط الجانبي إذا كان عرض الشاشة أقل من 480 بكسل.لم يتم التخطيط لرمز القائمة بعد؛أريد فقط أن يختفي الشريط الجانبي وأن يستخدم المحتوى الرئيسي 100% من المساحة لاحقًا.

بعد أن تخليت عن استخدام divs العائمة، بدأت أقرأ الكثير عن استخدام العرض:inline-block لهذا الغرض.على سبيل المثال هنا.يبدو أن هذا يعمل بشكل أفضل بكثير من التعويم، ولكن هناك بعض المشكلات التي لا أستطيع حلها.

• في نافذة كبيرة يعمل بشكل جيد الآن.ولكن إذا قمت بتغيير حجم النافذة إلى حجم أصغر، فسيبدأ التخطيط في الانهيار.أعلم أن السبب في ذلك هو أن الشريط الجانبي ثابت، لكن الرئيسي هو بالنسبة المئوية.لذلك، عندما تصبح النافذة أصغر، تقل المساحة المتبقية للشريط الجانبي أيضًا.كيف يمكنني "إخبار" القسم الرئيسي دائمًا "بملء بقية المساحة"؟

• يعمل استعلام الوسائط الذي يجعل الشريط الجانبي يختفي، ولكنه يترك فجوة.لا أفهم سبب عدم تغيير حجمه وفقًا لملف CSS الخاص بي.

هذا هو كود html وcss الخاص بي:

<div id="wrapper">
        <div id="header">
            <img src="logo.jpg" alt="Smiley face" style="height:15%;width:50%;">
        </div>
        <div id="mainWrap">
            <div id="sidebar">
                Sidebar
            </div>
            <div id="main">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Main
            </div>
        </div>
        <div id="footer">
            Footer
        </div>
    </div>

وهذا هو ملف CSS الخاص بي:

@media screen and (max-width:480px){

#sidebar {
visibility:hidden;
width:0;
}
#main{
    width:100%;
}

#mainWrap{
font-size:0;
}
#header{
color:white;
margin-bottom:4em;
}


#sidebar{
font-size:12px;
width:25%;
vertical-align:top;
display:inline-block;
}

#main{
font-size:12px;
width:75%;
display:inline-block;
vertical-align:top;

}

#footer{
    font-size:12px;
    border-style: solid;
}

Answer 1

تحقق من هذا: http://jsfiddle.net/panchroma/Bjh35/

HTML هو نفسه الذي تستخدمه، مع بعض التغييرات المهمة في CSS.

أولاً، كان لديك خطأ في بناء الجملة ولم تغلق الملف

@media screen and (max-width:480px){
.... 
} <==== you forgot this curly brace  

ثانيًا، تحتاج إلى وضع استعلام الوسائط بعد كتلة CSS الرئيسية، وإلا فسيتم استبدال معظم الإعدادات بما قمت بخفضه في ورقة الأنماط.

وأخيرًا، تريد استخدام إزالة الشريط الجانبي عند إطارات العرض الضيقة display:none; لديك visibility: hidden; والذي يخفي العنصر ببساطة، لكنه لا يزال يشغل مساحة على الصفحة

أتمنى أن يساعدك هذا!

CSS

#mainWrap{
font-size:0;
    background-color:#aaa;
}
#header{
color:white;
margin-bottom:4em;
    background-color:#ddd;
}


#sidebar{
font-size:12px;
width:25%;
vertical-align:top;
display:inline-block;
    background-color:pink;
}

#main{
font-size:12px;
width:75%;
display:inline-block;
vertical-align:top;
    background-color:olive;

}

#footer{
    font-size:12px;
    border-style: solid;
    background-color:#ffc;
}

@media screen and (max-width:480px){

    #sidebar {
        display:none;
    }

    #main{
        width:100%;
    }
}

Answer 2

... على الرغم من أنني متعب للغاية لقراءة كل الكود الخاص بك، فإليك الحل الخاص بك:

giveacodicetagpre.

http://jsfiddle.net/d78g2/1/