Làm thế nào để có được hai div này cạnh nhau?

110

Tôi có hai div không được lồng vào nhau, một bên dưới cái kia. Cả hai đều nằm trong một div cha và div cha này lặp lại chính nó. Về cơ bản:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

Tôi muốn lấy từng cặp child_div_1và child_div_2cạnh nhau. Tôi có thể làm cái này như thế nào?

css layout html

— Justin Meltzer
nguồn

82

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Kiểm tra ví dụ làm việc tại http://jsfiddle.net/c6242/1/

— Hussein
nguồn

1

Ông muốn con cái div thẳng hàng bên cạnh nhau, không phải là cha mẹ (ít nhất đó là sự hiểu biết của tôi ...)

— ehdv

4

Tôi vẫn nghĩ rằng display: table-cellsẽ có kết quả gần hơn với ý của anh ấy (vì từ đó chúng sẽ có cùng chiều cao etcetera) nhưng cách này chắc chắn sẽ hiệu quả.

— ehdv

@ehdv display: table-cellkhông được hỗ trợ trong IE6 IE7. float: trái; là cách thích hợp để làm điều này.

— Hussein

Trên thực tế, cách thích hợp để thực hiện việc này trong IE6,7 là với <tr><td>, bởi vì bất kỳ tùy chọn nào khác sẽ bị hỏng khi người dùng thay đổi kích thước cửa sổ. Trong các trình duyệt hiện đại, display: inline-blockthường là lựa chọn tốt nhất.

— John Henckel

126

Vì div theo mặc định là blockcác phần tử - nghĩa là chúng sẽ chiếm toàn bộ chiều rộng có sẵn, hãy thử sử dụng -

display:inline-block;

Các divhiện đang render inline tức là không làm gián đoạn dòng chảy của các yếu tố, nhưng sẽ vẫn được coi như một yếu tố ngăn chặn.

Tôi thấy kỹ thuật này dễ hơn vật lộn với floats.

Xem hướng dẫn này để biết thêm - http://learnlayout.com/inline-block.html . Tôi muốn giới thiệu ngay cả các bài viết trước đó dẫn đến bài báo đó. (Không, tôi không viết nó)

— Robin Maben
nguồn

Tôi thực sự thích giải pháp này. Vấn đề duy nhất của tôi với nó là căn chỉnh phần dưới cùng của cả hai div thay vì căn chỉnh phần trên. Có cài đặt nhanh cho việc này không?

— Chris

Tôi khuyên bạn nên sử dụng 2 trình bao bọc divcó chiều cao bằng nhau để nội dung bên trong chúng dường như được căn trên cùng.

— Robin Maben

2

Tôi đồng ý. Điều này tốt hơn nhiều float:leftvì nó cung cấp cho bạn nhiều tùy chọn hơn mà không cần xác định lại toàn bộ bố cục của bạn. Mọi thứ "chỉ hoạt động" theo cách này. Kiểm tra nó ở đây: jsfiddle.net/SrAQd/4

— Jerry

12

Để có được căn chỉnh theo chiều dọc, tôi sẽ thêm "vertical-align: top;"

— cdiggins

@Chris: Vâng, tôi đồng ý với cdiggins. Điều đó sẽ giúp bạn.

— Robin Maben

44

Tôi thấy đoạn mã dưới đây rất hữu ích, nó có thể giúp ích cho bất kỳ ai tìm kiếm ở đây

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

Mở rộng đoạn mã

— rìu
nguồn

11

Sử dụng flexbox nó rất đơn giản!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Ví dụ về Fiddle

— Sol
nguồn

6

Sử dụng phong cách

.child_div_1 {
    float:left
}

— amit_g
nguồn

5

Tốt nhất phù hợp với tôi:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

— jiantongc
nguồn

2

float:leftThuộc tính người dùng trong lớp div con

kiểm tra chi tiết cấu trúc div: http://www.dzone.com/links/r/div_table.html

— Pranay Rana
nguồn

2

Sử dụng flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

— dasfdsa
nguồn