在他們的父div的底部並排垂直對齊

我試圖將多個div放在位於0高度div內的頁面底部，以便容器div不覆蓋頁面的一部分，因此攔截任何鼠標點擊事件。截至目前，divs只從父div行（0高度父母）開始，向下而不是向上。從本質上講，我試圖複製facebook的即時聊天信使設置方式，儘管它可以作爲跨瀏覽器兼容，但是，我在網上能夠找到的所有內容都涉及到單個元素，堆疊元素（每個元素頂部其他）或使用各種方法，如display:table-cell或display:flex，這些方法不能與舊版IE瀏覽器兼容。在他們的父div的底部並排垂直對齊

如果您正在閱讀本文，認爲它不太適合兼容性問題（因爲使用IE版本X和以前版本的人太少），那麼您可以將兼容性問題拋出門外（只要它仍然是跨瀏覽器的）。

這是一個相當蹩腳的嘗試，使視覺（無法找到一行將站在文本塊的頂部，所以假設圖像停止時，它是頁面將結束的地方）。

______________ 
|   | 
|   | 
|   | 
|   | 
|   | 
|  ___ | 
| __ | | | 
| | | | | |

謝謝。

來源

2015-11-05 Logan Hasbrouck

您可以：

顯示的項目爲inline-block他們水平疊加。
使用vertical-align: bottom將其底邊對齊到線框的底部。
考慮使用white-space: nowrap強制他們留在一個單一的線框。
將它們放置在與bottom: 0絕對定位的內包裝內，即放置在其包含塊的底部。
將內包裝放在相對定位的外包裝中。

#outer-wrapper { 
 
    height: 0; 
 
    border: 1px solid; 
 
    position: relative; 
 
    margin-top: 70px; 
 
} 
 
#inner-wrapper { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.item { 
 
    display: inline-block; 
 
    height: 30px; 
 
    width: 40px; 
 
    border: 1px solid blue; 
 
    vertical-align: bottom; 
 
} 
 
.bigger.item { 
 
    height: 50px; 
 
}

<div id="outer-wrapper"> 
 
    <div id="inner-wrapper"> 
 
    <div class="item"></div> 
 
    <div class="bigger item"></div> 
 
    </div> 
 
</div>

來源

2015-11-05 17:04:25 Oriol

謝謝你，夥計。 :) –

我剛纔意識到，我該如何設置這個位置：fixed;'？我需要將它粘貼到屏幕底部，就像Facebook聊天一樣。 –

@LoganHasbrouck然後使用'position：fixed; bottom：0' [demo]（http://jsfiddle.net/vt6jbtde/）。但是如果你把它從流程中拿出來，我就沒有看到'高度：0'這一點。 – Oriol

類似的答案奧里奧爾。他/她排除了這個位置：就在絕對定位的容器上，但它與我所要做的相同，達99％。

演示： http://codepen.io/staypuftman/pen/YyOaBo

創建您的大部分內容
將第一個容器內的絕對定位的容器
創建兩個inline-block的項目一字排開一起

HTML：

<div class="master-box"> 
    <div class="bottom-box-container"> 
    <div class="bottom-box-1"> 
    </div> 
    <div class="bottom-box-2"> 
    </div> 
    </div> 
</div>

CSS：

.master-box { 
    background-color: #b3d9ff; 
    height: 400px; 
    position: relative; 
    width: 800px; 
} 

.bottom-box-container { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

.bottom-box-1 { 
    border: 1px solid #000; 
    background-color: #ffedb3; 
    display: inline-block; 
    height: 200px; 
    vertical-align: bottom; 
    width: 200px; 
} 

.bottom-box-2 { 
    border: 1px solid #000; 
    background-color: #feb3ff; 
    display: inline-block; 
    height: 200px; 
    vertical-align: bottom; 
    width: 200px; 
}

來源

2015-11-05 17:17:22 staypuftman

在他們的父div的底部並排垂直對齊

回答

相關問題