CSS - ทำให้ div จัดแนวในแนวนอน

ฉันมีคอนเทนเนอร์ div ที่มีค่าคงที่widthและheightด้วยoverflow: hidden.

ฉันต้องการลอยแถวแนวนอน: div ด้านซ้ายภายในคอนเทนเนอร์นี้ ตัวหารที่ลอยไปทางซ้ายจะดันเข้าสู่ 'บรรทัด' ด้านล่างตามธรรมชาติหลังจากที่พวกเขาอ่านขอบเขตทางขวาของพาเรนต์ สิ่งนี้จะเกิดขึ้นแม้ว่าheightผู้ปกครองจะไม่อนุญาตก็ตาม นี่คือลักษณะที่ปรากฏ:

! [ผิด] [1] - ลบรูปภาพกระท่อมรูปภาพที่ถูกแทนที่ด้วยโฆษณา

ฉันต้องการให้มีลักษณะอย่างไร:

! [ขวา] [2] - ลบรูปภาพกระท่อมที่ถูกแทนที่ด้วยโฆษณา

หมายเหตุ: เอฟเฟกต์ที่ฉันต้องการสามารถทำได้โดยใช้องค์ประกอบแบบอินไลน์ & white-space: no-wrap(นั่นคือวิธีที่ฉันทำในภาพที่แสดง) อย่างไรก็ตามสิ่งนี้ไม่ดีสำหรับฉัน (ด้วยเหตุผลที่ยาวเกินไปที่จะอธิบายที่นี่) เนื่องจาก div ย่อยต้องเป็นองค์ประกอบระดับบล็อกแบบลอย

คุณอาจใส่ Div ด้านในลงในคอนเทนเนอร์ที่กว้างพอที่จะเก็บ Div ที่ลอยได้ทั้งหมด

#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>

style="overflow:hidden"สำหรับผู้ปกครองdivและstyle="float: left"สำหรับเด็กทุกคนdivsเป็นสิ่งสำคัญในการdivsจัดตำแหน่งในแนวนอนสำหรับเบราว์เซอร์รุ่นเก่าเช่น IE7 และต่ำกว่า

สำหรับเบราว์เซอร์สมัยใหม่คุณสามารถstyle="display: table-cell"ใช้ได้กับเด็กทุกคนdivsและจะแสดงผลในแนวนอนอย่างถูกต้อง

สิ่งนี้ดูเหมือนใกล้เคียงกับที่คุณต้องการ:

#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>

คุณสามารถใช้clipคุณสมบัติ:

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

จดบันทึกposition: absoluteและoverflow: hiddenจำเป็นเพื่อclipไปทำงาน

ตอนนี้คุณสามารถใช้ css flexbox เพื่อจัดแนว div ในแนวนอนและแนวตั้งได้หากต้องการ สูตรทั่วไปจะเป็นแบบนี้

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

child-div {
  width: /* yoursize for each div */
  ;
}

Float: left, display: inline-block จะล้มเหลวในการจัดแนวองค์ประกอบในแนวนอนหากเกินความกว้างของคอนเทนเนอร์

สิ่งสำคัญคือต้องทราบว่าคอนเทนเนอร์ไม่ควรห่อหุ้มหากองค์ประกอบต้องแสดงในแนวนอน: white-space: nowrap

ลอยทิ้งไว้ ใน Chrome อย่างน้อยคุณก็ไม่จำเป็นต้องมี Wrapper id="container"ในตัวอย่างของ LucaM

คุณสามารถทำสิ่งนี้:

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

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

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