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

Question

Tôi có một div chứa với chiều rộng cố định và chiều cao, với tràn: ẩn.

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

[sai] [1] - hình ảnh loại bỏ lán hình ảnh đó đã được thay thế bằng một quảng cáo

Làm thế nào tôi muốn nó nhìn:!

[Ngay ] [2] - hình ảnh loại bỏ lán hình ảnh đó đã được thay thế bằng một quảng cáo

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

Answer 1

Bạn có thể đặt một div bên trong trong vùng chứa đủ rộng để giữ tất cả các div được thả 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>

Answer 2

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

Answer 3

bạn có thể sử dụng clip tài sản:

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

lưu ý các position: absolute và overflow: hidden cần thiết để có được clip làm việc.

Answer 4

style="overflow:hidden" cho mẹ div và style="float: left" cho tất cả các con divs rất quan trọng để làm cho divs class ngang cho các trình duyệt cũ như IE7 và dưới đây.

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

Answer 5

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.

Answer 6

Float: bên trái, hiển thị: inline-block cả hai đều sẽ không 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à các thùng chứa không nên quấn nếu các yếu tố PHẢI hiển thị theo chiều ngang: white-space: nowrap

Answer 7

Bây giờ bạn có thể sử dụng css flexbox để gắn kết các div ngang và dọc nếu bạn cần.công thức chung như sau:

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