web-dev-qa-db-ja.com

Div要素を右寄せにするにはどうすればいいですか？

私のhtmlドキュメントの本体は3つの要素、ボタン、フォーム、そしてキャンバスから成ります。ボタンとフォームを右寄せにし、キャンバスを左寄せにします。問題は、最初の2つの要素を整列させようとしたときに、それらが互いに従わなくなり、代わりに水平方向に隣同士になった場合です。間にスペースはありません。

#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="http://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="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>
csshtml5
249
MEURSAULT

フォームとボタンの両方を含むdivを作成してから、float: right;を設定してdivを右にフロートさせることができます。

222
vantrung -cuncon

フロートは問題ありませんが、ie6＆7では問題があります。

内側のdivにはmargin-left:auto; margin-right:0;を使いたいです。

356
pstanton

昔の答え最新情報：flexboxを使う。現在、ほとんどすべてのブラウザで動作する。

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

そして、あなたはもっと空想的になることができます。

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

そしてより愛好家：

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>
107
Michael Bushe

float:rightは親divの外側に出ることができるので（オーバーフロー：親のために隠されることが時々助けになるかもしれません）そして私のためのmargin-left: auto, margin-right: 0は複雑な入れ子になったdivでは動作しませんでした（理由は調べません）。

要素と親が両方ともinlineまたはtext-align: rightであるときこれが機能すると仮定して、私は特定の要素に対してinline-blockが機能すると考えました。

注：text-align CSSプロパティは、テキストなどのインラインコンテンツがその親ブロック要素でどのように配置されるかを記述します。 text-alignはブロック要素自身の整列を制御するのではなく、それらのインライン内容だけを制御します。

例：

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

これがJS Fiddle です。

26
Mladen Adamovic

こんな意味ですか？ http://jsfiddle.net/6PyrK/1

フォームとボタンにfloat:rightとclear:both;の属性を追加できます。

17
Joseph Marikle

親divの右端に並べて配置したい複数のdivがある場合は、親divにtext-align: right;を設定します。

7
Mo Bitar

あなたがIE9以下をサポートする必要がないなら、あなたはこれを解決するためにflexboxを使うことができます： codepen

IE10と11に関するいくつかのバグ（ flexbox support ）もありますが、この例にはありません。

<button>をコンテナに入れることで、<form>とflex-direction: columnを垂直方向に揃えることができます。要素のソース順は上から下に表示される順序になるので、順番を変更しました。

その後、フォームとボタンのコンテナをキャンバスと水平に配置するには、それらをflex-direction: rowのコンテナにラップします。繰り返しますが、要素のソース順は左から右に表示される順序になりますので、並べ替えました。

また、質問にリンクされているコードからすべてのpositionおよびfloatスタイルの規則を削除する必要があります。

これは上でリンクされたcodepenのHTMLの縮小版です。

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

そしてこれが関連CSSです。

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

#formContainer {
  display: flex;
  flex-direction: column;
}
2
Bates550

flexboxをflex-growとともに使用して、最後の要素を右にプッシュできます。

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

あなたは、単純にpadding-left：60％（例えばex）を使ってあなたのコンテンツを右揃えにすると同時にレスポンシブコンテナでコンテンツをラップすることができます（私の場合はnavbarが必要です）。

0
Leevansha

ブートストラップを使用している場合：

<div class="pull-right"></div>
0
anil shrestha