Văn bản CSS Căn chỉnh dưới cùng của vùng chứa

Tôi có một tiêu đề có hình ảnh lớn được thả nổi ở một bên và một đoạn văn bản nhỏ ở phía bên kia. Tôi muốn đoạn bắt đầu ở cuối div tiêu đề. Nếu có 5 dòng trong đoạn văn, tôi muốn dòng cuối cùng nằm ở cuối tiêu đề. Tôi gặp khó khăn khi nhận đoạn văn để căn chỉnh chính nó ở đó.Văn bản CSS Căn chỉnh dưới cùng của vùng chứa

Tôi có một cái gì đó như thế này:

<div id='header'> 

    <img id='logo' /> 

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

</div>

Và CSS là:

div#header { 
    height: 200px; 
} 

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

p#quote { 
    float: left; 
}

Nguồn

2011-12-06 djt

Vì vậy, bạn có muốn mọi thứ xếp hàng ở bên trái có mặt hay không? – 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; 
}

bằng cách đặt position:relative trên vùng chứa chính, bạn có thể đặt các phần tử vị trí tuyệt đối bên trong nó :)

Nguồn

2011-12-06 17:13:55

bingo! cảm ơn vì những lời khuyên! – djt

Tôi đã thực hiện một số thay đổi trong mã của bạn. Hãy thử điều này

<!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>

Nguồn

2011-12-06 17:40:01

Hãy giải thích thêm về mã và nhu cầu của bạn –

Gần đây tôi đi qua một thủ thuật trung tâm theo chiều dọc mà tôi đã có thể điều chỉnh đến máy chủ mục đích này: http://codepen.io/Bushwazi/pen/VYBBmL

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

** Cần chỉ ra rằng trình duyệt cần phải hỗ trợ CSS3 transform: http://caniuse.com/#search=transforms

Nguồn

2015-03-04 22:01:36

Mã của codepen của bạn (sử dụng flexbox) hoàn toàn khác với câu trả lời này, điều này không hoạt động. – phillyslick

Tôi đoán tôi đã không hoàn toàn hiểu được câu hỏi. Tôi nghĩ mục đích là để có được văn bản để 'dọc-align' để dưới cùng của phụ huynh. Hy vọng điều này là hữu ích cho người khác kết thúc ở đây tìm kiếm một câu trả lời như tôi đã làm. –

Văn bản CSS Căn chỉnh dưới cùng của vùng chứa

Trả lời

Các vấn đề liên quan