如何在html和css中垂直對齊div？
[英]how to align divs vertically in html and css?
問題描述
我有以下html div：
...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...
我想要做的是顯示第一個div（包含條形圖）和第二個div（包含圖表中的一些文本）彼此相鄰，然后在它們下面顯示另外兩個div（包含其他圖表）另一個垂直，即我希望它看起來像：
我目前得到的是：
cdfChart_div（div4）顯示在lineChart_div（div3）之上。 我需要使用什么CSS樣式來解決這個問題？
5 個解決方案
解決方案1
8 已采納 2012-06-28 14:04:55
在浮動的 stats_div之后立即出現的div ：
style="clear:left;"
完整代碼：
...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="clear:left; width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...
由於stats_div是浮動的，因此其內容stats_div正常流程中取出。 因此，作為正常流程一部分的下一個div的內容不會為stats_div的內容騰出空間。 如果您希望其內容位於前一個浮動div的內容之后，則必須clear下一個div一側。 通常你會看到clear: both適用於正常流動div任一邊緣。
解決方案2
2 2012-06-28 14:03:22
嘗試
<body>
<div style="overflow:auto">
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
</div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
解決方案3
2 2012-06-28 14:09:21
看看我的例子在這里
HTML
<body>
<div id="barChart_div" style="width: 145px; height: 250px;">aa</div>
<div id="stats_div" style="width: 350px; height: 250px;">bb</div>
<div id="lineChart_div" style="width: 600px; height: 250px;">cc</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;">dd</div>
</body>
CSS
#barChart_div, #stats_div { float:left; }
#lineChart_div { clear:left; }
釋
首先要記住，有一個“內聯”CSS並不是一個好習慣。 你必須更喜歡外部CSS或內部（即標題）CSS。
但是讓我們看一下這個例子： jsFiddle 。
如您所見，如果您沒有指定不同的所有div將導致“理想列”。 那是因為“html解析器”的正常流程會將它們放在那個位置。
如果使用span元素執行此操作，則會獲得同一“行”上的所有元素（如果它們可以站立且不會溢出，顯然）。 你可以看到在這里 。
當你告訴float:left你強迫“div”浮動在前一個元素的“右邊距”。
現在，由於第二個元素浮動，第三個元素將以相同的方式起作用。
作為“標准”，您必須使用clear:left來恢復“正常”行為
解決方案4
0 2012-06-28 14:01:31
如果可以的話，改變你的源為了使stats_div至上，然后使用float：正確的只是它。
解決方案5
0 2012-06-28 14:11:17
<div id="stats_div" style="width: 350px; height: 250px; float:right; background-color:#0099CC; border:1px solid black">custom</div>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">1</div>
<div id="lineChart_div" style="width: 600px; height: 250px; float:left;background-color:#0099CC; border:1px solid black">2</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">3</div>
將其粘貼到您的HTML，效果將是可見的
如何垂直對齊不同寬度和線條的 div（選擇），同時將它們與其他（文本）對齊 - HTML 和 CSS
[英]How to align divs (selects) of different widths and lines vertically whilst also aligning them with other (text)- HTML and CSS
[html5和css3]如何水平和垂直對齊三個不同大小的div，而在它們之間不留任何空間
[英][html5 and css3]How to align three different size divs horizontally and vertically without leaving any space between them
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.