div要素を右揃えにするにはどうすればよいですか？

178

私のHTML文書の本体は、ボタン、フォーム、キャンバスの3つの要素で構成されています。私は、ボタンとフォームを右揃えにし、キャンバスを左揃えにします。問題は、最初の2つの要素を整列させようとしたときに、それらはもはやお互いをたどるのではなく、横に横たわっていますか？これまでのコードをheresします。その間にスペースはありません。div要素を右揃えにするにはどうすればよいですか？

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

出典

2011-10-07 MEURSAULT

147

その後、float: right;を設定することにより、右にdivのフロートを作る、フォーム&ボタンの両方が含まれているdiv要素を作ることができます。

出典

2011-10-07 21:58:58

このような意味ですか？あなたは、フォームやボタン

出典

2011-10-07 22:00:14

270

山車にfloat:rightとclear:both;の属性を追加することができますhttp://jsfiddle.net/6PyrK/1

は、私は、内側のdivにmargin-left:auto; margin-right:0;を使用することを好むだろうOK、しかし、IE6 & 7.

との問題があります。

出典

2012-09-07 22:21:12 pstanton

完璧なソリューション！高さを維持するので浮動小数点よりも良い – iTake

0の値でpxを使用しないでください。 – ShellNinja

@シェルニンジャなぜですか？私は0が有効であることを知っていますが、0pxもそうです。 – pstanton

-8

私は、これは古い記事です知っているが、あなただけの権利のために<div id=xyz align="right">を使用することができませんでした。

rightをleft、center、justifyに置き換えることができます。そして私にとってmargin-left: auto, margin-right: 0は動作しませんでした：

は（時には役立つかもしれない親のために隠されたオーバーフロー） float:rightは、親のdivの外に出ることができますので、この質問のための

出典

2014-05-30 19:20:50 Dafydd

+19

ページのフォーマットにHTML属性を使用しないでください。それがCSSのために作られたものです。実際、 'align'属性は[非推奨]です（http://www.w3.org/TR/html5/obsolete.html#non-conforming-features）。 – Johannes

...それゆえ、古い方法はもはや機能しないので、このような質問の理由とそれに対する答えが必要です。 – vapcguy

その他の答えはそれほど良いものではありません:)私のサイトに従事します複雑な入れ子divs（私はなぜ調査しなかった）。

特定の要素の場合、text-align: rightが機能していることがわかりました。これは、要素と親が両方ともinlineまたは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>

Here's a JS Fiddle。

出典

2015-07-28 18:03:38

あなたはIE9、あなたがこの問題を解決するためにフレキシボックスを使用することができます下のをサポートする必要がない場合：codepen

ありIE10と11（flexbox support）といくつかのバグもありますが、彼らは、この例では存在しない

flex-direction: columnの容器に入れて、<button>と<form>を縦に並べることができます。要素のソースの順序は、上から下に表示される順序になりますので、並べ替えます。

フォーム&ボタンコンテナをflex-direction: rowのコンテナにラップしてキャンバスに水平に整列させることができます。再び要素のソースの順序は、左から右に表示される順番になりますので、並べ替えを行います。

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

ここでは、上にリンクされたコードブックの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>

そして

はあなたが親のdivの右端に並んで整列したい複数のdivを持っている場合は、関連するCSS

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

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

出典

2016-11-11 19:30:43 Bates550

で、親のdivにtext-align: right;を設定します。

出典

2016-11-24 02:55:32

古い回答。アップデート：フレックスボックスを使用すると、すべてのブラウザでかなり機能します。

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

出典

2017-08-27 02:14:18

それは動作しますが、スタッキングの代わりに画面が小さくなると、実際には狭くなってしまいます。 –

定義するブレークポイントで行方向から列方向にフレックス方向を変更するメディアクエリを追加する必要があります。この例では、正当化コンテンツを変更または削除することをお勧めします。そうでない場合は、左右の代わりに物事が上下に伸びます。 –

div要素を右揃えにするにはどうすればよいですか？

答えて

関連する問題