DIV لا يتناسب مع توسيع المحتوى

Question

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

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
 </div>

وحق يطفو حق أو ملكية يذهب على رأس ضمن الحق والمحتوى هو تحته، يطفو الناحية اليسرى ويمتد ارتفاع اليمين (في الأصل كان ذلك روسبان = 2). المشكلة تأتي مع المجمع الذي يحتاج إلى ارتفاع ثابت، لأن الأم ليس لديها أي (لذلك لا يمكن استخدام٪)، وبما أن محتوى ديناميكي لا أعرف مسبقا ما ارتفاع أحتاج. إذا كنت تخلص من الارتفاع، ويوسع شعبة، ولكن تحت غطاء من شعبة (BG اللون، والحدود وغيرها) يختفي لأنه يحتوي الآن ارتفاع 0.

وأيضا، أنا أعمل على رمز موجود مسبقا من الناحية المثالية التي لا تريد فوضى كثيرا مع الخارقة جافا سكريبت، ولكن إذا كان لدي أي خيار ثم سوف. لذا، ماذا يمكنني أن أفعل؟

div.wrapper{ height: 150px ; width: 100% ; } 

div.left{ height: 100% ; float: left ; width: 25% ; text-align: center ; } 

div.right{ float: right ; height: 100% ; } 

div.title{ width: 100% ; height: 50px ; } 

div.content{ width: 100% ; height: 100px ; text-align: center ; }

Answer 1

أولا، لا تستخدم <div class="title">، واستخدام <h1>.

وأن يقال أنا أقول لك أن تحاول اللعب حولها مع الخاصية ارتفاع ... ولكن من دون CSS انه من الصعب معرفة ما يجري.

وآخر خدعة هو وضع خلفية على المجمع وهمية أن شعبة ترك تتوسع على طول الطريق إلى أسفل. اليسار واليمين تعويم اليسار واليمين مع عرض ثابت ويبدو على ما يرام.

وتحرير:

وطيب، بعد سينغ في CSS، أود أن أقول أن ما تريد القيام به هو إضافة واضحة: على حد سواء في نهاية المجمع على هذا النحو:

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
    <div style="clear both;"></div>
 </div>

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

وبالمناسبة، لا تذهب div.class، استخدم فقط. الطبقة

Answer 2

وانا التخمين كنت بحاجة لاحتواء يطفو مع

div.wrapper { overflow:hidden; }

ولكن من شأنه أن يساعد إذا قمت بلصقه في الواقع بعض المغلق.

وتحرير: لتكرار ارتفاع بنسبة 100٪ مع الأعمدة وسيلة سهلة كما ذكرت من قبل هو الاعتماد على أعمدة فو، تعيين صورة الخلفية على div.wrapper (الخلفية: رابط (repeat.gif) تكرار، ذ؛) وقتل ارتفاع بنسبة 100٪ على الأعمدة لأن ذلك لن يكون له أي تأثير.