CSS文本對齊底部容器

我有一個標題，其中有一個大圖像浮在一邊，另一邊有一小段文字。我希望段落在標題div的底部開始。如果段落中有5行，我希望最後一行位於標題的底部。我無法讓段落在那裏對齊。CSS文本對齊底部容器

我有這樣的事情：

<div id='header'> 

    <img id='logo' /> 

    <p id='quote'></p> 

</div>

而CSS是：

div#header { 
    height: 200px; 
} 

div#header img#logo { 
    float: left; 
} 

p#quote { 
    float: left; 
}

來源

2011-12-06 djt

所以，你想要一切排在左邊，還是什麼？ – PseudoNinja

http://jsfiddle.net/danheberden/ymwPe/

<div id="container"> 
    <div id="gonnaBeOnTheBottom"> 
     <p>Hi there!</p> 
     <p>I'm on the bottom!</p> 
    </div> 
</div>

CSS：

#container { 
    background: #EEE; 
    height:400px; 
    width:400px; 
    position:relative; 
} 
#gonnaBeOnTheBottom { 
    position:absolute; 
    bottom:0; 
}

通過在父容器上設置position:relative，你可以在其內部的絕對位置元素:)

來源

2011-12-06 17:13:55

賓果！感謝提示！ – djt

我在你的代碼中做了一些改變。試試這個

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style> 


div#header { 
height:200px; 
} 

div#header img#logo { 
float:left; 
} 

.header p { 
float:left 
} 

</style> 
</head> 
<body> 

<div id='header'> 

    <img id='logo' src="../Pictures/myfarm.PNG" width="220" height="130" /> 

<p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 

</div> 
</body> 
</html>

來源

2011-12-06 17:40:01

更多關於您的代碼和需求的解釋 –

我最近碰到一個垂直居中的技巧，我能調整到服務器爲此傳來： http://codepen.io/Bushwazi/pen/VYBBmL

parent { 
    height: 200px; 
} 
child { 
    position: relative; 
    top: 100%; 
    transform: translateY(-100%); 
    display block 
}

**需要指出的是，瀏覽器需要支持CSS3 transform： http://caniuse.com/#search=transforms

來源

2015-03-04 22:01:36

您的codepen的代碼（使用flexbox）完全不同於這個答案，這是行不通的。 – phillyslick

我想我並沒有完全理解這個問題。我認爲目標是讓文本垂直對齊到父級的底部。希望這對於最終找到像我這樣的答案的其他人有幫助。 –

CSS文本對齊底部容器

回答

相關問題