html - تعلم - style.css download




CSS واضح بعد كل طفل nth (5)

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

أريد مسح بعد كل عنصر ثالث دون تغيير علامة HTML ، بحيث ينتقل العنصر الرابع إلى الصف التالي. أحاول إضافة nth-child (3): بعد ، لكن لا يبدو أنه يعمل.

إليك الكود:

HTML:

<div class="list">
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet</div>
</div>

CSS:

.item:nth-child(3):after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

العرض التوضيحي: http://jsfiddle.net/KPXyw/


استخدام أدناه رمز

.item:nth-child(4){clear:both;}

جرب هذا عملها

.list{
    width: 300px;
    overflow: hidden;
}

.item{
   float: left;
    width: 90px;
    background: yellow;
    margin-right: 5px;
    margin-bottom: 10px;
}

.item:nth-child(4){
    //background: brown;
    clear:both;
}

هذه تحتاج فقط.


هو الصحيح. لكن سيكون أمراً رائعاً إذا استخدمت display: inline-block بدلاً من float:left . يرجى الاطلاع أدناه على سبيل المثال.

.list {
  width: 300px;
  font-size: 0;
}
.item {
  display: inline-block;
  width: 90px;
  font-size: 16px;
  background: yellow;
  margin-right: 5px;
  margin-bottom: 10px;
  vertical-align: top;
}
<div class="list">
  <div class="item">Lorem ipsum dolor sit amet,</div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="item">Lorem ipsum dolor sit amet,</div>
  <div class="item">Lorem ipsum dolor sit amet,</div>
  <div class="item">Lorem ipsum dolor sit amet</div>
</div>


يجب عليك استخدام nth-child(3n+1) بحيث يحدث ذلك عند كل طفل يتابع طفلًا يتضاعف ثلاث مرات ، وليس فقط مع الطفل الثالث الأول.

بعد ذلك ، يجب عليك إزالة ذلك :after ، تريد مسح الطفل الفعلي.






css