將DIV與CSS無關的DIV的底部對齊（無父/子關係）

如果DIV沒有父/子關係，是否將B的底部與A的底部對齊？將DIV與CSS無關的DIV的底部對齊（無父/子關係）

A和B的高度根據正在查看哪個頁面而改變，所以我不相信我可以使用填充/邊距/不管。

因爲我是新用戶，所以我不能發佈圖片，所以我會用文字說明。

What I have:    What I want: 
[ nav bar ]   [ nav bar ] 
--------- -----   --------- 
|  | | B |   |  | 
| A | -----   | A | 
|  |    |  | ----- 
|  |    |  | | B | 
---------    --------- ----- 
    ----------    ---------- 
    | content|    | content|

我是一個很棒的CSS newb，我正在用Wordpress剽竊它來做我想做的事。任何幫助，將不勝感激。

謝謝！

我正在瀏覽的網頁是在這裏：

http://rachelhappen.com/the-charlie-baker-sneaker/

來源

2011-12-31 amphibious

我明白你想要做什麼。我建議將父div放在A和B的相對位置上，並將B div絕對定位到該容器的底部。這樣，它會一直堅持到底。

我測試了下面的代碼，它看起來很完美。它附帶的屏幕截圖呈現。

<style type="text/css"> 

* { margin:0; padding:0; } 
.container { position:relative; width:600px; height:400px; } 
.container .a { background:red; position:absolute; height:400px; width:400px; left:0; } 
.container .b { background:green; position:absolute; height:200px; width:200px; right:0; bottom:0; } 
.cl { clear:both; } 

</style> 

<div class="container"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
</div>

http://i.stack.imgur.com/6unHw.png

來源

2011-12-31 18:31:17 wwwroth

只是注意...那* {}在CSS可怕的形式。我只用它來擺脫瀏覽器的默認邊距和填充。如果您是noob，請查看http://html5boilerplate.com/進行CSS重置;）所有瀏覽器都將默認的CSS屬性分配給不同的HTML元素，這些元素會使您的代碼變得不穩定。 reset.css樣式表爲所有大型瀏覽器設定了運行狀態。 – wwwroth 2011-12-31 18:45:20

是的，如何訪問[JS小提琴]（http://jsfiddle.net/）或[JS Bin]（http://jsbin.com/），並顯示呈現的代碼*呈現* ..？ =） – 2011-12-31 18:45:39

因爲那太容易了; ）.. http：// jsfiddle。net/q6ECD/!! – wwwroth 2011-12-31 18:48:11

-1

想到的基本策略是：

換兩人在一個div容器
聲明的立場：相對「容器上觸發一個「容器「div上的屬性（找不到這個副作用的真實姓名）
絕對放置你的側邊欄，用」bottom：0「

來源

2011-12-31 18:32:42 Woahdae

對於我自己的後代，如果這是一個不好的解決方案，評論爲什麼？我之前製作過wordpress模板，OP沒有說他只能修改CSS而不是HTML。這不是我給的，但是它是一個不好的解決方案的原因？ – Woahdae 2011-12-31 20:37:12

當然，這就是vertical-align屬性的用途。

HTML：

<div id="container"> 
    <div id="a"> 

    </div><div id="b"> 

    </div> 
</div>

注意</div><div id="b">是感人。因爲這兩個元素都是inline-block元素，所以標記中的任何空格都會在演示文稿中產生空間。

CSS：

#container > div { 
    vertical-align: bottom; 
    width: 100px; 
    display: inline-block; } 
#a { 
    background: red; 
    height: 300px; } 
#b { 
    background: blue; 
    height: 100px; }

參見：http://jsfiddle.net/Wexcode/pbdHj/

來源

2011-12-31 18:50:25 Wex

布拉沃，除了造型ID;） – wwwroth 2011-12-31 18:53:19

@PhillipJamesRoth - 我不明白你的意思，沒有任何錯誤的造型ID。 http://www.w3.org/TR/CSS2/selector.html#id-selectors – Wex 2011-12-31 18:56:52

我不知道如何在Wordpress文章中創建容器DIV。這是我正在處理的頁面。我很欣賞你的建議... http://rachelhappen.com/the-charlie-baker-sneaker/ – amphibious 2011-12-31 19:03:15

將DIV與CSS無關的DIV的底部對齊（無父/子關係）

回答

相關問題