تمتد تلقائيا خلفية CSS متعددة الأقليص حسب حجم المحتوى

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

  •  16-09-2019
  •  | 
  •  

سؤال

أنا أبني موقع CSS وفشل في حل هذه المشكلة الجزئية:

على الجانب الأيسر يوجد مربع يتكون من ثلاثة صور. صورة أعلى، صورة أوسطية (اختيارية وممتد)، صورة أسفل.

أريد أن يمتد المربع إلى اليسار تلقائيا إذا كان هناك المزيد من المحتوى في الداخل. هذا يعمل بالفعل في الجانب الأيمن مع الرمز الحالي الخاص بي. (أضع كلا الأعمدة في حاوية DIV وتعيين المربع الأيسر إلى الارتفاع: 100.)

ولكن الآن يجب أن يكون هناك أيضا محتوى في المربع الأيسر. يتأرجح هذا المحتوى لأنني ضبط المربع الأيسر في وضع: مطلق. وبالتالي فإنه لا يزيد الحجم.

لم أتمكن من الحصول على هذا التأثير دون موقف: مطلق رغم ذلك. حاولت استخدام تعويم إلخ.

هنا هو رمز المثال:

    <body>
    <div id="centerwrapper">
        Header etc<br/>
        <div id="verticalstretcher">
            <div id="bgtop">            
                <div id="bgbottom">         
                    <div id="bgmiddle">
                    </div>
                </div>
            </div>
            <div id="content">
                Content here will auto-stretch the container vertically (and the box to the left!)
            </div>  
        </div>
        Footer etc<br/>
    </div>
</body>

مع هذه الأنماط:

#centerwrapper {
    width: 500px;
    margin: 0 auto;
}
#verticalstretcher {
    position: relative;
    min-height: 280px; /* Sum of the top and bottom image height */
    width: 100%;
    background-color: orange;   
}
#bgtop {
    position: absolute;
    width: 185px; /* width of the bg images */
    height: 100%;
    background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;              
}
#bgmiddle {
    position: absolute;
    width: 100%;
    top: 250px; /* Don't cover top GIF */
    bottom: 15px; /* Don't cover bottom GIF */
    background-color: yellow; /* Repeated image here */             
}
#content {
    margin-left: 200px; /* Start the text right from the box */
}

يبدو هذا (ملون من أجل فهم أفضل):

alt text

الجزء الأصفر هو في الواقع صورة ممتدة، تركتها على سبيل المثال، وهي تعمل كما هو متوقع.

كيف يمكنني إضافة نص إلى المربع الأيمن الذي ستمدده أيضا؟ أم أنه من الممكن مع الجدول بدلا من CSS في هذه المرحلة؟

تحرير: يبدو حل Bitdrink بهذه الطريقة في متصفحي (FF الحالي)

نص Alt http://img502.imageshack.us/img502/1241/layoutsample2.png.

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

المحلول

يمكن أن أكون مخطئا هنا ولكن ما تحاول تحقيقه هنا هو عمودان من نفس الارتفاع بغض النظر عن مقدار النص الموجود في الأعمدة اليسرى أو اليمنى.

أعمدة الارتفاع المتساوي باستخدام CSS هل يجب إعطاء أفضل تقنية CSS لهذا المكان من خلال الخلفيات والحواف المنحنية السفلية إلى نقالة DIV # الرأسي.

الطريقة الأخرى الوحيدة التي أعرفها لجعل أعمدة متساوية الارتفاع هو استخدام JavaScript. يرى مقالة مجموعة خيوط حول تحديد مرتفعات متساوية مع مسج.

نصائح أخرى

المشكلة هي المواقع المطلقة! إذا كنت تريد تغيير حجم تلقائي (في رأسية) من المربع الأيسر، فما عليك سوى تطبيق "تعويم: يسار" إلى #bgtop! لاحظ أن السمة "ارتفاع الحد الأدنى" غير مدعوم من جميع المتصفحات (على سبيل المثال IE6)! الرمز أدناه هو مثال:

<style type="text/css" >
#centerwrapper {
    width: 500px;
    margin: 0 auto;
}
#verticalstretcher {
    min-height: 280px; /* Sum of the top and bottom image height */
    width: 100%;
    background-color: orange;       
}
#bgtop {
    float: left;
    width: 185px; /* width of the bg images */
    height: 100%;
    background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
    width: 100%;
    height: 100%;
    background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;                              
}
#bgmiddle {
    width: 100%;
    background-color: yellow; /* Repeated image here */                             
}
#content {
    margin-left: 200px;     /* Start the text right from the box */
    background-color: #FFF;
    border: 1px dotted black;
}

</style>


<body>
    <div id="centerwrapper">
        Header etc<br/>
        <div id="verticalstretcher">
            <div id="bgtop"> 
                text top                                           
                    <div id="bgmiddle">
                        text middle
                            <div id="bgbottom">
                            text bottom
                            </div> 
                    </div>
            </div>
         <div id="content">
         Content here will auto-stretch the container vertically (and the box to the left!)
    </div>
</div>
Footer etc<br/>
</div>
</body>

يمكنك أن ترى النتيجة أدناه:

alt text

يتم تغيير حجم 4 DIV (S) رأسيا وفقا لمحتواهم!

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