如何正確對齊div元素？

178

我的html文檔的正文由3個元素組成，一個按鈕，一個表單和一個畫布。我希望按鈕和窗體右對齊，畫布保持左對齊。問題是，當我嘗試對齊前兩個元素時，它們不再相互跟隨，而是沿水平方向彼此相鄰，繼承我迄今爲止的代碼，我希望表單直接跟在右側的按鈕之後兩者之間沒有空間。如何正確對齊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

您可以同時包含形式&按鈕一個div，然後通過設置float: right;使DIV浮動的權利。

來源

2011-10-07 21:58:58

你的意思是這樣嗎？ http://jsfiddle.net/6PyrK/1

可以的float:right和clear:both;屬性添加到窗體和按鈕

來源

2011-10-07 22:00:14

270

彩車是好的，但問題與IE6 & 7.

我寧願在內部DIV使用margin-left:auto; margin-right:0;。

來源

2012-09-07 22:21:12 pstanton

完美解決方案！優於浮動，因爲它保留了高度 – iTake

不應該在0值中使用px。 – ShellNinja

@ShellNinja爲什麼？我知道'0'是有效的，但是0px也是這樣......爭辯你的觀點，以便我們學到一些東西。 – pstanton

-8

我知道這是一箇舊的帖子，但你不能只用<div id=xyz align="right">的權利。

你可以用左邊，中心和正確值替換右邊。

曾爲我的網站:)

來源

2014-05-30 19:20:50 Dafydd

+19

請不要使用HTML屬性來設置頁面的格式。這就是CSS的原因。實際上，'align'屬性[現已被棄用]（http://www.w3.org/TR/html5/obsolete.html#non-conforming-features）。 – Johannes

...因此這樣的問題的原因和需要回答，因爲舊的方法不再有效。 – vapcguy

對於這個問題，其他的答案是不那麼好，因爲float:right可以去父母DIV以外（溢出：隱藏於母公司有時可能會有所幫助），margin-left: auto, margin-right: 0我沒有工作在複雜的嵌套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和下面你可以使用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; 
}

來源

2016-11-11 19:30:43 Bates550

如果您有想要在父div的右端並排排列多個div，父DIV設置text-align: right;。

來源

2016-11-24 02:55:32

舊的答案。更新：使用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>

來源

2017-08-27 02:14:18

它可以工作，但是當屏幕變小而不是堆疊時，它們會變得很窄 –

您需要添加一個媒體查詢，以便在您定義的轉折點處逐行更改彈性方向。在這個例子中，你可能會想要改變或刪除你的證明內容，否則事情會拉伸而不是左右。 –

如何正確對齊div元素？

回答

相關問題