Làm thế nào để nổi 3 div cạnh nhau bằng CSS?

Tôi biết cách làm cho 2 div nổi cạnh nhau, chỉ cần nổi một bên sang trái và bên kia.

Nhưng làm thế nào để làm điều này với 3 div hay tôi chỉ nên sử dụng bảng cho mục đích này?

Chỉ cần cung cấp cho họ một chiều rộng và float: left;, đây là một ví dụ:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

Cách hiện đại là sử dụng CSS flexbox , xem các bảng hỗ trợ .

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Bạn cũng có thể sử dụng lưới CSS , xem các bảng hỗ trợ .

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Nó giống như cách bạn làm cho hai div, chỉ cần thả cái thứ ba sang trái hoặc phải.

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

thả trôi tất cả

đảm bảo chiều rộng được chỉ định rằng tất cả chúng có thể vừa với thùng chứa của chúng (div khác hoặc cửa sổ), nếu không chúng sẽ bọc

<br style="clear: left;" />

mã mà ai đó đã đăng lên đó, nó đã lừa khi tôi dán nó ngay trước khi đóng DIV Container, nó sẽ giúp xóa tất cả các DIV tiếp theo khỏi trùng lặp với các DIV mà tôi đã tạo cạnh nhau ở trên cùng!

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

tadaa !! :)

Nổi cả ba div sang trái. Giống như ở đây:

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}

Tôi thường chỉ nổi thứ nhất sang trái, thứ hai sang phải. Cái thứ ba tự động căn chỉnh giữa chúng sau đó.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

lợi thế của cách này là bạn có thể đặt độc lập chiều rộng của cột khác với điều kiện bạn giữ nó dưới 100%, nếu bạn sử dụng 3 x 30% thì 10% còn lại được chia thành khoảng cách 5% giữa các coll collers

bạn có thể nổi: còn lại cho tất cả chúng và đặt chiều rộng thành 33.333%

thử thêm "display: block" vào kiểu

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

Tôi đã không thấy câu trả lời bootstrap, vì vậy những gì nó đáng giá:

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

hãy để Bootstrap tìm ra tỷ lệ phần trăm. Tôi muốn xóa cả hai, chỉ trong trường hợp.

Tôi thích phương pháp này, phao được hỗ trợ kém trong các phiên bản IE cũ hơn (thực sự? ...)

.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }

CẬP NHẬT: Tất nhiên, để sử dụng kỹ thuật này và do định vị tuyệt đối, bạn cần đặt các div trên một container và thực hiện xử lý hậu kỳ để xác định chiều cao của if, đại loại như sau:

jQuery(document).ready(function(){ 
    jQuery('.main').height( Math.max (
        jQuery('.column-left').height(),
        jQuery('.column‌​-right').height(),
        jQuery('.column-center').height())
    ); 
});

Không phải là điều tuyệt vời nhất trên thế giới, nhưng ít nhất là không phá vỡ các IE cũ.

Nhưng nó có hoạt động trong Chrome không?

Float từng div và thiết lập rõ ràng, cả hai cho hàng. Không cần thiết lập độ rộng nếu bạn không muốn. Hoạt động trong Chrome 41, Firefox 37, IE 11

Nhấp chuột vào Fiddle JS

HTML

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

CSS

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}

Đây là cách tôi quản lý để làm một cái gì đó tương tự như thế này bên trong một <footer>yếu tố:

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

CSS:

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}

@Leniel phương pháp này là tốt nhưng bạn cần thêm chiều rộng cho tất cả các div nổi. Tôi sẽ nói làm cho chúng có chiều rộng bằng nhau hoặc gán chiều rộng cố định. Cái gì đó như

.content-wrapper > div { width:33.3%; }

bạn có thể gán tên lớp cho mỗi div thay vì thêm inline style, đây không phải là một cách thực hành tốt.

Hãy chắc chắn sử dụng div div hoặc xóa div để tránh nội dung theo sau vẫn còn dưới các div này.

Bạn có thể tìm thấy chi tiết về cách sử dụng div div tại đây