使用html將文本div與相鄰div的底部對齊

我有一個徽標圖像作爲我正在編輯的網站頁腳的一部分，可以在下面進行簡化。使用html將文本div與相鄰div的底部對齊

<div style="float:left"> the logo </div> <div style="float:right"> text links </div>

此刻這很好。徽標出現在左側，鏈接在最右側。然而，我唯一的問題是文本是在標誌div的頂部對齊;我希望它與徽標div的底部對齊，以便網頁甚至在最後。

我已經試過「ALIGN =底部」的文字股利，但似乎並沒有工作

編輯顯示問題：

當前設置：

!!!!!!!!!!!    <div 2> *default top alignment* 
!!<div 1>!! 
!!!!!!!!!!! 

Preferred set up: 

!!!!!!!!!!! 
!!<div 1>!! 
!!!!!!!!!!!    <div2> *Preferred align along the bottom"

來源

2015-12-16 algorhythm

我不太讓你想實現什麼？你可以指定或添加你的目標是什麼圖像？ –

可能重複的[CSS垂直對齊不適用於浮動]（http://stackoverflow.com/questions/11718134/css-vertical-align-does-not-work-with-float） –

我已編輯顯示更好地表示問題 – algorhythm

.parentDiv { 
 
    position:relative; 
 
    width:100%; 
 
    height:100px; 
 
    display:inline-block; 
 
    } 
 

 
.div1 { 
 
    position:absolute; 
 
    left:0px; 
 
    bottom:0px; 
 
    display:inline-block; 
 
    width:100px; 
 
    height:60px; 
 
    background:#ddd; 
 
    } 
 

 
.div2 { 
 
    position:absolute; 
 
    right:0px; 
 
    bottom:0px; 
 
    display:inline-block; 
 
    width:300px; 
 
    height:50px; 
 
    background:#ccc; 
 
    }

<div class="parentDiv"> 
 
    <div class="div1">logo</div> 
 
    <div class="div2">Some text aligned to bottom</div> 
 
</div>

來源

2015-12-16 13:02:00 yjs

我只能使用html，但將這些值傳遞給html工作。謝謝 – algorhythm

一個可能的解決方案是使用flexbox和align-items屬性。欲瞭解更多信息，你可以看看http://philipwalton.github.io/solved-by-flexbox/demos/grids/

.grid { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    
 
    -webkit-align-items: flex-end; 
 
    -ms-flex-align: end; 
 
    align-items: end; 
 
} 
 

 
.grid > div { 
 
    padding: 10px; 
 

 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
} 
 

 
.content { 
 
    padding: 10px; 
 
    background: #ccc; 
 
}

<div class="grid"> 
 
    <div class="left"> 
 
    <div class="content">Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in.</div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="content">DIV 2</div> 
 
    </div> 
 
</div>

來源

2015-12-16 13:03:13 RWAM

使用html將文本div與相鄰div的底部對齊

回答

相關問題