موقف شعبة الطفل بالنسبة لشعبة جد

StackOverflow https://stackoverflow.com/questions/536566

سؤال

وحصلت مشكلة CSS، وأنا لا أعرف ما إذا كان من الممكن فعلا لتحقيق ما أريد. وفيما يلي رسم لتوضيح ما أريد أن تحقيق ما يلي:

وهنا في صفحة العرض:

menu_test.htm

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

وشكرا لمساعدتكم.

هل كانت مفيدة؟

المحلول

وأعتقد أنك يمكن أن تحقق ما تريد إذا كنت قادرا على إضافة "greatgrandparent" ووضع الطفل بالنسبة إلى ذلك.

وهنا تعديل على قانون قمت بنشرها: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 

    <div style="position: relative;">

    <div style="background-color: InfoBackground; border: solid 1px Silver; width: 400px; height: 200px; overflow-y:auto; overflow-x:hidden;"> 

        <div style="background-color: InfoBackground; border: solid 1px Silver; width: 100%; font-size: 11px; padding-left: 210px;" > 

            <div style="background-color: Window; border: solid 1px Silver; width: 200px; height: 199px; position: absolute; top: 1px; left: 1px;" > 

                <p style="font-family: Segoe UI; font-size: 11px;"> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
                </p> 

            </div> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 


        </div> 

    </div> 
    </div>
    <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p> 
</body> 
</html>

نصائح أخرى

فما استقاموا لكم فاستقيموا النظر في استخدام جافا سكريبت لإنشاء شعبة جديدة ونقل المحتوى من شعبة الطفل في شعبة الجديد. هذا الإختراق لكنه يعمل إذا لم تتمكن من تغيير هيكل HTML إلى شيء أكثر استعدادا لهدفك.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top