Hoe kan ik 3 div’s naast elkaar laten zweven met CSS?

Ik weet hoe ik 2 div’s naast elkaar moet laten zweven, de ene naar links en de andere naar rechts.

Maar hoe doe je dit met 3 div’s of moet ik hier gewoon tabellen voor gebruiken?


Antwoord 1, autoriteit 100%

Geef ze gewoon een breedte en float: left;, hier is een voorbeeld:

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

Antwoord 2, autoriteit 47%

De moderne manier is om de CSS flexbox te gebruiken , zie ondersteuningstabellen.

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Antwoord 3, autoriteit 17%

Het is dezelfde manier als voor de twee div’s, laat de derde ook gewoon naar links of rechts zweven.

<style>
  .left{float:left; width:33%;}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

4, Autoriteit 8%

float ze allemaal links

Zorg ervoor dat een breedte is opgegeven dat ze allemaal in hun container kunnen passen (een ander div of het venster), anders zullen ze

wikkelen


5, Autoriteit 7%

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

die code die daar is gepost, het deed de truc !!!
Als ik het plak voordat je de container DIV sluit, helpt het alle volgende dia’s van overlapping met de DIV’s die ik naast de bovenkant heb gemaakt!

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

TADAA !! 🙂


6, Autoriteit 5%

float alle drie DIV’s naar links. Zoals hier:

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

7, Autoriteit 3%

Ik drijf meestal gewoon de eerste naar links, de tweede naar rechts. De derde lijnt vervolgens automatisch uit.

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

8, Autoriteit 3%

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

Het voordeel van deze manier is dat u elke kolombreedte onafhankelijk van de andere kunt instellen zolang u het onder de 100% houdt, als u 3 x 30% gebruikt, wordt de resterende 10% gesplitst als een ruimte van 5% tussen de Columns


9, Autoriteit 2%

U kunt zweven: links voor alle en instellen van de breedte tot 33.333%


10, Autoriteit 2%

Probeer “Display: Block” toe te voegen aan de stijl

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

11, Autoriteit 2%

Ik geef de voorkeur aan deze methode, drijvers worden slecht ondersteund in oudere versies van IE (werkelijk? …)

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

Bijgewerkt:
Natuurlijk, om deze techniek te gebruiken en vanwege de absolute positionering die je nodig hebt om de DIV’s op een container om te sluiten en een postprocessing te doen om de hoogte van IF, zoiets als volgt te definiëren:

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

Niet het meest verbazingwekkende in de wereld, maar in ieder geval breekt niet op oudere IES.


12

, maar werkt het in Chrome?

float elke div en stel helder in; beide voor de rij. Niet nodig om breedtes in te stellen als u niet wilt. Werkt in Chrome 41, Firefox 37, IE 11

Klik voor 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;
}

Antwoord 13

Hier is hoe ik erin slaagde iets soortgelijks te doen in een <footer>element:

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

Antwoord 14

@Leniel deze methode is goed, maar je moet breedte toevoegen aan alle zwevende div’s. Ik zou zeggen: maak ze even breed of wijs een vaste breedte toe. Iets als

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

u kunt klassenamen aan elke div toewijzen in plaats van inline styletoe te voegen, wat geen goede gewoonte is.

Zorg ervoor dat u een clearfix div of clear div gebruikt om te voorkomen dat de volgende inhoud onder deze div’s blijft.

U kunt details vinden over het gebruik van Clearfix DIV hier


15

display: table;
Als tekst moet verschijnen alsof op dezelfde lijn

Met andere woorden; Als de verticale uitlijning van de tekst in elke <div>identiek moet zijn, kan men een moderne retro-throwback proberen naar weleer met de enigszins controversiële tablestyling:

.container {display: table;}
div   {display: table-cell;}

Dit bleek behoorlijk handig om CSL -styled Citaten in Pandoc , zoals hieronder weergegeven:

div.csl-bib-body {}
div.csl-entry {
    margin-top: 1rem;
    display: table;
    }
div.csl-left-margin {
    display: table-cell;
    }
div.csl-right-inline {
    padding-left: 1ex;
    display: table-cell;
    }

Het citatienummer diven de Citation-gegevens divzijn nu weergegeven op exact dezelfde hoogte .

Other episodes