Div高度不適合父母

仍在開發我的html5/css3移動網站，我無法調整div的高度到其父母。Div高度不適合父母

Actual screenshot

小提琴並不完全是這樣，因爲我使用網絡字體（離線保存但正如我不會有在目標系統上的網絡連接）。但問題依然如故。

如果沒有，您可能會發現問題的正確性：我希望綠色和紅色欄（.itemclass）始終與其父項（.item）的內容大小相同。

取決於字體，它的大小（仍然發揮與它周圍）和每個項目的整體高度，我必須精確地調整切緣陰性。否則，它看起來像在屏幕截圖中。我剛纔提到的負利潤率是在CSS類.itemclass：（用箭頭標記也在小提琴）...

.itemclass { 
    height: 100px; 
    width: 50px; 
    background-color: #27ae60; 
    vertical-align: middle; 
    text-align: center; 
    color: white; 
    font-size: 2em; 
    margin-top: -27px; /* <=== */ 
    display: inline-block; 
}

這不是解決辦法。我嘗試了很多東西，只是按照我提到的方式使它「工作」。

任何更好的想法如何使它看起來乾淨無一劈？

同時，關於我的HTML/CSS技巧其它改進和好評。

對不起追加整個代碼到小提琴。如果我要去除東西，我不知道它是否具有代表性。

問候

來源

2014-09-19 Atmocreations

我可能會走這條路：

.item { 
    position: relative; 
    ... 
} 
.itemclass { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    ... 
} 
.itemcontent { 
    margin-left: 50px; 
    ... 
}

Demo

Really big font demo

考慮一個合理的最小寬度爲體，以防止重疊等.tagline 。

來源

2014-09-19 21:17:19 isherwood

正如我的想法http://jsfiddle.net/1eg2cwLs/2/ – 2014-09-19 21:18:31

這聽起來像一個計劃，謝謝。如果你刪除'font-size'，那麼右邊的圖標怎麼樣？該物品的高度變得太小，以致其部分被切割。 – Atmocreations 2014-09-19 21:24:17

我又看到了一個「問題」：如果字體和/或內容很小，圖標（項目頂部）與類別（底部）重疊。如何做得更好？謝謝！ – Atmocreations 2014-09-19 21:30:46

overflow: hidden;在這種情況下你最好的朋友！它隱藏從視圖之外的.item

將其添加到.item {}聲明任何溢出的內容。

http://jsfiddle.net/1eg2cwLs/1/

來源

2014-09-19 21:16:17

這可以工作到'.itemclass'的高度低於'.item'的高度。在'.itemcontent'上嘗試大字體。 – isherwood 2014-09-19 21:20:06

是的，好點，但這解決了OP的陳述問題。我沒有看到大字號的提及。 – 2014-09-19 21:29:36

您可以將.item的margin-top設置爲0，而是調整.vcenter：之前的margin-top。這樣你只是調整文本而不是div。

或者你可以完全放棄.itemclass的靜態高度和寬度。現在，.item類將會擴展。 http://jsfiddle.net/1eg2cwLs/5/

.item { 
    width: 100%; 
    height: auto; 
    background-color: #eeeeee; 
    border-bottom: 1px solid #cccccc; 
    overflow: hidden; 
} 
.itemclass { 
    height: 100%; 
    width: auto; 
    background-color: #27ae60; 
    vertical-align: middle; 
    text-align: center; 
    color: white; 
    font-size: 2em; 
    margin-top: 0; 
    display: inline-block; 
}

作爲備用，您可以設置。項目不顯示溢出，然後調整行高：

.item {overflow:hidden}

來源

2014-09-19 21:26:09 Taruckus

Div高度不適合父母

回答

相關問題