CSS - جعل divs أفقيا محاذاة

Question

لدي وعاء div ثابتة العرض والارتفاع ، مع تجاوز:خفية.

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

![خطأ][1] - إزالة صورة شاك الصورة التي تم استبدالها من قبل الاعلان

كم أود أن تبدو:

![Right][2] - إزالة صورة شاك الصورة التي تم استبدالها من قبل الاعلان

ملاحظة:تأثير اريد يمكن أن يتحقق باستخدام العناصر المضمنة & white-space:لا التفاف (هذا هو كيف فعلت ذلك في الصورة مبين).غير أن هذا الأمر ليس جيدا بالنسبة لي (لأسباب طويلة جدا أن نشرح هنا) ، كما الطفل divs تحتاج إلى أن تكون طرحت كتلة مستوى العناصر.

Answer 1

كنت قد وضعت الداخلي شعبة في وعاء بما فيه الكفاية واسعة من عقد كل طرحت divs.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 2

style="overflow:hidden" الوالدين div و style="float: left" لجميع الأطفال divs مهمة لجعل divs align أفقيا على المتصفحات القديمة مثل IE7 و أدناه.

على المتصفحات الحديثة ، يمكنك استخدام style="display: table-cell" لجميع الأطفال divs و هذا من شأنه أن يجعل أفقيا بشكل صحيح.

Answer 3

يمكنك استخدام clip مكان الإقامة:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

ملاحظة position: absolute و overflow: hidden بغية الحصول على clip إلى العمل.

Answer 4

هذا يبدو قريبا إلى ما تريد:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Answer 5

عشري:اليسار, عرض:مضمنة كتلة كل تفشل في محاذاة العناصر أفقيا إذا كانت يتجاوز عرض الحاوية.

من المهم أن نلاحظ أن الحاوية يجب أن لا التفاف إذا كانت العناصر يجب أن العرض أفقيا: white-space: nowrap

Answer 6

يمكنك الآن استخدام css flexbox إلى محاذاة divs أفقيا و عموديا إذا كنت بحاجة إلى.الصيغة العامة يذهب مثل هذا

parent-div {
   display:flex;
   flex-wrap: wrap;
   justify-content: center ; /* for horizontal aligning of child divs */
   align-items : center ; /* for vertical aligning */
   }
child-div {
  width: /* yoursize for each div */ ; 
 }

Answer 7

وتطفو على اليسار.في كروم, على الأقل أنت لا تحتاج إلى المجمع ، id="container", في LucaM المثال.