CSS kullanarak 3 div nasıl yan yana yüzer?

2 divanın yan yana nasıl yüzdüğünü biliyorum, sadece soldan diğerine sağa yüzer.

Ama bunu 3 div ile nasıl yapabilirim yoksa sadece bu amaçla tabloları mı kullanmalıyım?

Onlara bir genişlik verin ve float: left;işte size bir örnek:

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

Modern yol CSS esnek kutusunu kullanmaktır, destek tablolarına bakın .

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

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

CSS ızgarasını da kullanabilirsiniz , destek tablolarına bakın .

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

İki div için yaptığınız gibi, üçüncü olanı da sola veya sağa kaydırın.

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

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

hepsini bırak

hepsinin kaplarına sığabilecekleri bir genişliğin belirtildiğinden emin olun (başka bir div veya pencere), aksi takdirde sarılırlar

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

o kod birisi orada yayınlanan, hile yaptı !!! Konteyner DIV'sini kapatmadan hemen önce yapıştırdığımda, sonraki tüm DIV'lerin üstte yan yana oluşturduğum DIV'lerle çakışmasını önler!

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

Tadaa !! :)

Her üç div'i de sola kaydırın. Burası gibi:

.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;
}

Genellikle sadece ilk sola, ikinci sağa yüzerim. Üçüncüsü otomatik olarak aralarında hizalanır.

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

Bu yolun avantajı, her sütun genişliğini% 100 altında tuttuğunuz sürece diğerinden bağımsız olarak ayarlayabilmenizdir, 3 x 30% kullanırsanız kalan% 10, sütunlar arasında% 5 ayırıcı boşluk olarak bölünür

kayan: hepsi için sol ve genişliği 33.333% olarak ayarlayabilirsiniz

stile "display: block" eklemeyi deneyin

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


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

Bootstrap cevabını görmedim, bu yüzden buna değer:

<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;" />

Bootstrap'ın yüzdeleri bulmasına izin verin. Her ikisini de temizlemeyi seviyorum, ne olur ne olmaz.

Bu yöntemi tercih ediyorum, şamandıralar IE'nin eski sürümlerinde zayıf destekleniyor (gerçekten? ...)

.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; }

GÜNCELLENDİ: Tabii ki, bu tekniği kullanmak ve mutlak konumlandırma nedeniyle div'ları bir konteynerin üzerine yerleştirmeniz ve eğer yüksekliğini tanımlamak için bir son işlem yapmanız gerekir, eğer böyle bir şey:

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

Dünyadaki en şaşırtıcı şey değil, ama en azından eski IE'lerde bozulmuyor.

Ancak Chrome'da çalışıyor mu?

Her div'i yüzdürün ve her ikisi de satır için net olarak ayarlayın. İstemiyorsanız genişlikleri ayarlamanıza gerek yoktur. Chrome 41, Firefox 37, IE 11'de çalışır

JS Fiddle için tıklayınız

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;

}

Bir <footer>öğenin içinde buna benzer bir şey yapmayı nasıl başardım :

<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 bu yöntem iyidir, ancak tüm yüzen div'lere genişlik eklemeniz gerekir. Ben onlara eşit genişlik yapmak veya sabit genişlik atamak söyleyebilirim. Gibi bir şey

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

ekleme yapmak yerine her div'e sınıf adları atayabilirsiniz inline style, bu iyi bir uygulama değildir.

Aşağıdaki içeriklerin bu div'lerin altında kalmasını önlemek için bir clearfix div veya clear div kullandığınızdan emin olun.

Clearfix div kullanımı ile ilgili ayrıntıları burada bulabilirsiniz