الخلفية و css يطفو

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

  •  19-09-2019
  •  | 
  •  

سؤال

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

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
    .frame { width: 960px; margin-left: auto; margin-right: auto; }
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
    #bkg { background-color: blue; }
</style>
</head>

<body>
    <div class="frame" id="bkg">
        <div class="column">Column A</div>
        <div class="column">Column B<div><br/><br/><br/><br/></div></div>
        <div class="column">Column C</div>
    </div>
</body>

</html>

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

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

المحلول

يمكنك الحصول على تعويم الإطار كما في:

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

وهذا يفعل ذلك. أو يمكنك وضع عنصر إضافي في الإطار باستخدام "إصلاح واضح". تقوم شبكة 960 مصنوعة مسبقا بذلك من أجلك مع فئة "واضحة":

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>

نصائح أخرى

ما عليك سوى إضافة هذه القاعدة الإضافية إلى محدد:

div.frame {
     overflow:hidden;
}

يجب أن لا تحتاج إلى الاعتماد على Clearfix إلا إذا كان لديك عناصر تأتي خارج الإطار، ولا يجب أن تعتمد على أي علامات غريبة بوضوح: كلاهما.

تحتاج إلى تطبيق clearfix فئة إلى #bkg.

<div class="frame clearfix" id="bkg">

ما تريد القيام به هو "مسح تعويم". هناك العديد من الخيارات هناك، بعض السهل، ومعقدة للغاية.

الأسهل، هو إضافة إزالة المقاصة بعد العمود الأخير، مثل هذا:

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

وذلك ينبغي الشغل.

فيما يلي بعض الطرق الأخرى (بعض، CSS النقي):

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