Jak unosić 3 div obok siebie za pomocą CSS?

Wiem, jak sprawić, by 2 divy unosiły się obok siebie, po prostu unosić jeden w lewo, a drugi w prawo.

Ale jak to zrobić z 3 divami, czy powinienem po prostu używać do tego celu tabel?

Po prostu podaj im szerokość, a float: left;oto przykład:

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

Współczesnym sposobem jest użycie Flexbox CSS , patrz tabele wsparcia .

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

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

Możesz także użyć siatki CSS , zobacz tabele wsparcia .

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

Jest tak samo jak w przypadku dwóch div, po prostu przestaw trzeci na lewą lub prawą.

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

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

unosić je wszystkie w lewo

upewnij się, że określono szerokość, aby wszystkie mogły zmieścić się w kontenerze (innym div lub oknie), w przeciwnym razie zostaną zawinięte

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

ten kod, który ktoś tam opublikował, załatwił sprawę !!! kiedy wklejam go tuż przed zamknięciem DIV kontenera, pomaga wyczyścić wszystkie kolejne DIV z nakładania się z DIV, które utworzyłem obok siebie u góry!

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

tadaa !! :)

Przesuń wszystkie trzy divy w lewo. Jak tutaj:

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

Zwykle pływam pierwszy w lewo, drugi w prawo. Trzeci automatycznie dopasowuje się wtedy między nimi.

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

zaletą tego sposobu jest to, że możesz ustawić szerokość każdej kolumny niezależnie od drugiej, o ile utrzymasz ją poniżej 100%, jeśli użyjesz 3 x 30%, pozostałe 10% zostanie podzielone jako 5% przestrzeń dzieląca między kolumnami

możesz unosić się: pozostawiony dla wszystkich i ustawić szerokość na 33,333%

spróbuj dodać styl „display: block”

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


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

Nie widziałem odpowiedzi bootstrap, więc po co to jest warte:

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

niech Bootstrap obliczy wartości procentowe. Na wszelki wypadek lubię je usuwać.

Wolę tę metodę, zmienne są słabo obsługiwane w starszych wersjach IE (naprawdę? ...)

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

ZAKTUALIZOWANO: Oczywiście, aby skorzystać z tej techniki i ze względu na bezwzględne pozycjonowanie, musisz zamknąć div na pojemniku i wykonać postprocessing, aby określić wysokość if, coś takiego:

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

Nie jest to najbardziej niesamowita rzecz na świecie, ale przynajmniej nie psuje się na starszych IE.

Ale czy to działa w Chrome?

Unieś każdy div i wyczyść; oba dla rzędu. Nie musisz ustawiać szerokości, jeśli nie chcesz. Działa w Chrome 41, Firefox 37, IE 11

Kliknij, aby pobrać JS Fiddle

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;

}

Oto jak udało mi się zrobić coś podobnego do tego wewnątrz <footer>elementu:

<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 ta metoda jest dobra, ale musisz dodać szerokość do wszystkich pływających elementów div. Powiedziałbym, aby uczynić je równymi szerokościami lub przypisać stałą szerokość. Coś jak

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

możesz przypisywać nazwy klas każdemu divowi, zamiast dodawać inline style, co nie jest dobrą praktyką.

Pamiętaj, aby użyć div div Clearfix lub Clear div, aby uniknąć, że treść pozostanie poniżej tych div.

Szczegółowe informacje na temat korzystania z div Clearfix można znaleźć tutaj