如何正确alignmentdiv元素？
我的html文档的主体由3个元素组成，一个button，一个表单和一个canvas。 我希望button和窗体右alignment，canvas保持左alignment。 问题是，当我尝试alignment前两个元素，他们不再遵循对方，而是彼此相邻水平？，inheritance人我到目前为止的代码，我想要的forms紧跟在右边的button后面两者之间没有空间。
<!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> 到现在为止，我的CSS仍然存在
#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; }
您可以创build一个包含表单和button的div，然后通过设置float: right;来使div浮动到float: right; 。
漂浮是好的，但有问题的ie6和7。
我宁愿使用margin-left:auto; margin-right:0; margin-left:auto; margin-right:0; 在内部分区。
这个问题的其他答案是不是很好，因为float:right可以超出父div（溢出：为父母隐藏有时可能会帮助）和margin-left: auto, margin-right: 0我没有在复杂的工作嵌套的div（我没有调查为什么）。
我已经想出了某些元素text-align: right作品，假设这是有效的，当元素和父母都是inline或inline-block 。
注意： text-align CSS属性描述了像文本这样的内联内容是如何在其父块元素中alignment的。 text-align不控制块元素本身的alignment，只有他们的内联内容。
一个例子：
<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小提琴 。
你是这个意思吗？ http://jsfiddle.net/6PyrK/1
你可以添加float:right的属性float:right和clear:both; 到窗体和button
旧的答案。 更新：使用flexbox，现在几乎可以在所有浏览器中使用。
<div style="display: flex; justify-content: flex-end"> <div>I'm on the right</div> </div>
如果你有多个div，你想要并排在父div的右端，设置text-align: right; 在父div上。
如果你不需要支持IE9及以下版本，你可以使用flexbox来解决这个问题： codepen
IE10和11（ flexbox支持 ）也有一些缺陷，但在这个例子中不存在
您可以将<button>和<form>垂直alignment，方法是将它们包装在具有flex-direction: column的容器中。 元素的来源顺序将是从上到下显示的顺序，所以我重新排列了它们。
然后，您可以将表单＆button容器与canvas水平alignment，方法是将它们包含在具有flex-direction: row的容器中。 元素的源顺序也是从左到右显示的顺序，所以我对它们进行了sorting。
此外，这将需要您从问题中链接的代码中删除所有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; }
我知道这是一个旧的post，但你不能只用<div id=xyz align="right"> 。
你可以用左边，中心和正确的replace。
在我的网站上工作:)
