CSS - Làm cho các div căn chỉnh theo chiều ngang

Tôi có một div container với một cố định widthvà height, với overflow: hidden.

Tôi muốn một hàng ngang của float: divs bên trái trong vùng chứa này. Các đơn vị được thả nổi bên trái sẽ tự nhiên đẩy lên 'dòng' bên dưới sau khi chúng đọc giới hạn bên phải của cha mẹ của chúng. Điều này sẽ xảy ra ngay cả khi heightcha mẹ không cho phép điều này. Đây là cách nó trông:

! [Sai] [1] - hình ảnh lán hình đã bị xóa mà được thay thế bằng quảng cáo

Tôi muốn nó trông như thế nào:

! [Right] [2] - hình ảnh lán hình đã bị xóa mà được thay thế bằng quảng cáo

Lưu ý: hiệu ứng tôi muốn có thể đạt được bằng cách sử dụng các phần tử nội tuyến & white-space: no-wrap(đó là cách tôi đã làm trong hình ảnh hiển thị). Tuy nhiên, điều này không tốt đối với tôi (vì lý do quá dài dòng để giải thích ở đây), vì div con cần phải là phần tử cấp khối nổi.

Bạn có thể đặt một div bên trong vào thùng chứa đủ rộng để chứa tất cả các div đã nổi.

#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"cho cha mẹ divvà style="float: left"cho tất cả trẻ em, divsđiều quan trọng là phải divscăn chỉnh theo chiều ngang cho các trình duyệt cũ như IE7 trở xuống.

Đối với các trình duyệt hiện đại, bạn có thể sử dụng style="display: table-cell"cho tất cả trẻ em divsvà nó sẽ hiển thị theo chiều ngang phù hợp.

Điều này có vẻ gần với những gì bạn muốn:

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

bạn có thể sử dụng thuộc cliptính:

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

lưu ý những position: absolutevà overflow: hiddencần thiết để bắt clipđầu làm việc.

Float: left, display: inline-block sẽ không thể căn chỉnh các phần tử theo chiều ngang nếu chúng vượt quá chiều rộng của vùng chứa.

Điều quan trọng cần lưu ý là vùng chứa không nên bọc nếu các phần tử PHẢI hiển thị theo chiều ngang: white-space: nowrap

Bây giờ bạn có thể sử dụng css flexbox để căn chỉnh các div theo chiều ngang và chiều dọc nếu bạn cần. công thức chung như thế này

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 */
  ;
}

Làm nổi chúng bên trái. Trong Chrome, ít nhất, bạn không cần phải có trình bao bọc id="container", trong ví dụ của LucaM.

Bạn có thể làm điều gì đó như sau:

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