div佔父母的高度

-2

我試圖炫耀我在網站上做的最好的髮型。div佔父母的高度

將鼠標懸停在圖像上時，會給出有關每種樣式的信息。懸停工作正常，並顯示出來，但即使我已將信息div的高度設置爲100％，它只佔用足夠的文本空間。我使用display：table來獲取垂直居中的文字「在圖像上」。當我將其更改爲顯示塊時，它可以正常工作，但垂直居中是必須的。這是非常煩人的& 2小時擺弄它後，我根本無法讓它工作。請幫忙！ http://jarahairandmakeup.tumblr.com/

div.post { 
    width: 50%; 
    height: auto; 
    position: relative; 
    float: left; 
} 

div.information { 
    display: table; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.65); 
    text-align: center; 
    z-index: 2; 
    opacity: 0; 
} 

div.post:hover .information { opacity: 1 !important; } 

div.info { 
    color: #fff; 
    display: table-cell; 
    vertical-align: middle; 
    font: 11px/1.4 'Gudea'; 
    letter-spacing: .3em; 
    text-transform: uppercase; 
    padding: 0 5%; 
} 

div.info h3 { 
    font: 100 20px/1 'Gudea'; 
    margin: 0; padding: 0; 
    letter-spacing: 6px; 
} 

div.info hr { color: #fff; background: #fff; margin: 20px auto;} 

div.image { 
    float: left; 
    position: relative; 
    z-index: 1; 
} 

div.image img.hairstyle { 
    width: 100%; 
    height: 100%; 
    display: block; 
} 


<div class="post"> 
     <a href="/ciara"> 
     <div class="information"> 
      <div class="info"> 
       <h3>CURLED UPDO</h3> 
       <hr /> 
       A romantic style updo with braided accents for prom 
      </div> 
     </div> 
     <div class="image"> 
      <img src="http://static.tumblr.com/ww0u3rz/BRjn5dotq/img_0919.jpg" class="hairstyle"> 
     </div> 
     </a> 
    </div>

我想使它這樣的信息div的黑色背景佔據了照片的整個長度。

來源

2014-05-11 James Charless Dickinson

編輯的一點是要清理的問題。要開始解決你的代碼，你有無效的標記。查看[這個問題]（http://stackoverflow.com/q/1827965/746045），看塊級元素（如div等）不在''標籤內。我會從有效的標記開始，而不用擔心誰在編輯您的問題。 – ethorn10

哇 - 態度！ –

@LayTaylor這只是非常令人沮喪？如果你不打算回答這個問題，那麼來到我的文章進行編輯的意義何在？因爲它不是「完美」的？這個網站的目的是讓人們得到他們無法弄清楚的代碼的幫助，而不是英語課程，你必須有現成的語法或格式。 –

-1

使用display：block代替表。

編輯：只是一個包裝包裹信息DIV，並具有以下的CSS：

display: table; 
position: absolute; 
height: 100%; 
width: 100%;

正常工作：http://cloud.kerim.me/image/2p3W1x011m0I

來源

2014-05-11 00:33:22

儘管如此，我仍然需要將照片裏面的文字垂直居中。 –

然後澄清你的問題。 –

它沒有爲我工作..我不知道你是如何做到這一點。它仍然不起作用 –

div佔父母的高度

回答

相關問題