Hoe lijn ik div-elementen rechts uit?

De hoofdtekst van mijn html-document bestaat uit 3 elementen, een knop, een formulier en een canvas. Ik wil dat de knop en het formulier rechts uitgelijnd zijn en het canvas links uitgelijnd. Het probleem is dat wanneer ik de eerste twee elementen probeer uit te lijnen, ze elkaar niet langer volgen en in plaats daarvan horizontaal naast elkaar staan? Dit is de code die ik tot nu toe heb, ik wil dat het formulier direct achter de knop aan de rechterkant volgt zonder spatie ertussen.

#cTask {
  background-color: lightgreen;
}
#button {
  position: relative;
  float: right;
}
#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="600" height="600" style="background:lightgray;">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

Antwoord 1, autoriteit 100%

Je kunt een div maken die zowel de vorm & de knop en laat de div vervolgens naar rechts zweven door float: right;in te stellen.


Antwoord 2, autoriteit 98%

Floats zijn oké, maar problematisch met IE 6 & 7.

Ik gebruik liever het volgende op de inner div:

margin-left: auto; 
margin-right: 0;

Zie de IE Double Margin Bugvoor uitleg over waarom.

p>


Antwoord 3, autoriteit 67%

Oude antwoorden. Een update: gebruik flexbox, werkt nu vrijwel in alle browsers.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

Antwoord 4, autoriteit 8%

Andere antwoorden op deze vraag zijn niet zo goed aangezien float:rightbuiten een bovenliggende div kan komen (overloop: verborgen voor bovenliggende kan soms helpen) en margin-left: auto, margin-right: 0werkte voor mij niet in complexe geneste divs (ik heb niet onderzocht waarom).

Ik heb ontdekt dat voor bepaalde elementen text-align: rightwerkt, ervan uitgaande dat dit werkt wanneer het element en de parent beide inlineof inline-block.

Opmerking: de CSS-eigenschap text-alignbeschrijft hoe inline-inhoud, zoals tekst, wordt uitgelijnd in het bovenliggende blokelement. text-alignregelt niet de uitlijning van blokelementen zelf, alleen hun inline inhoud.

Een voorbeeld:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

Hier is een JS Fiddle.


Antwoord 5, autoriteit 7%

Je kunt flexboxgebruiken met flex-growom het laatste element naar rechts te duwen.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>

Antwoord 6, autoriteit 6%

Als u meerdere div’s naast elkaar wilt laten uitlijnen aan het rechteruiteinde van de bovenliggende div, stelt u text-align: right;in op de bovenliggende div.


Antwoord 7, autoriteit 5%

Bedoel je zoiets? http://jsfiddle.net/6PyrK/1

Je kunt de attributen float:righten clear:both;toevoegen aan het formulier en de knop


Antwoord 8

Eenvoudig antwoord is hier:

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>

Antwoord 9

Misschien gewoon:

 margin: auto 0 auto auto;

Antwoord 10

Als je IE9 en lager niet hoeft te ondersteunen, kun je flexbox gebruiken om dit op te lossen: codepen

Er zijn ook een paar bugs met IE10 en 11 (flexbox-ondersteuning), maar die zijn er niet aanwezig in dit voorbeeld

U kunt de <button>en de <form>verticaal uitlijnen door ze in een container te verpakken met flex-direction: column. De bronvolgorde van de elementen is de volgorde waarin ze van boven naar beneden worden weergegeven, dus ik heb ze opnieuw gerangschikt.

U kunt het formulier vervolgens horizontaal uitlijnen & knopcontainer met het canvas door ze in een container te wikkelen met flex-direction: row. Nogmaals, de bronvolgorde van de elementen is de volgorde waarin ze van links naar rechts worden weergegeven, dus ik heb ze opnieuw gerangschikt.

Dit vereist ook dat u alle regels in de stijl positionen floatverwijdert uit de code die in de vraag is gekoppeld.

Hier is een ingekorte versie van de HTML in de codepen die hierboven is gelinkt.

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

En hier is de relevante CSS

#mainContainer {
  display: flex;
  flex-direction: row;
} 
#formContainer {
  display: flex;
  flex-direction: column;
}

Antwoord 11

Als je bootstrap gebruikt, dan:

<div class="pull-right"></div>

Antwoord 12

U kunt eenvoudig padding-left:60% (bijvoorbeeld) gebruiken om uw inhoud rechts uit te lijnen en tegelijkertijd de inhoud in een responsieve container te verpakken (in mijn geval had ik navigatiebalk nodig)
om ervoor te zorgen dat het in alle voorbeelden werkt.


Antwoord 13

Je kunt het gemakkelijk doen door deze css toe te voegen:
(Werkt in IE11)

<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>

Antwoord 14

Ik weet dat dit een oud bericht is, maar kun je niet gewoon <div id=xyz align="right">gebruiken voor rechts.

Je kunt rechts vervangen door links, centreren en uitvullen.

Heeft aan mijn site gewerkt 🙂

Other episodes