如何獲得與文本量CSS相關的邊距

Question

我在Wordpress博客中創建了一個特色區域，為此，我不得不使用z-oindex和絕對定位； 在文本上方放置文本。 但是，只要我的文本超過一定數量，就可以進行絕對定位，布局就會開始中斷。 有沒有一種方法可以根據文本的長度有條件地更改上邊距？ （不使用javascript）

這是我的jsfiddle： https ://jsfiddle.net/7vkcLdmq/

 #featured_home { width: 960px; height: 325px; } #featured_home a { text-decoration: none; color: white; } .sticky { margin: 10px; } .desc { overflow: hidden; height: 265px; } .sticky img { width: 120%; height: auto; z-index: -15; position: relative; } .sticky h2 { z-index: 10; position: relative; display: block; max-width: 330px; } .sticky:nth-child(1) { width: 490px; height: 265px; overflow: hidden; float: left; margin-left: 0px; } .sticky:nth-child(1) h2 { color: white; font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 22px; padding: 10px; background-color: rgba(218, 24, 114, 0.75); z-index: 10; position: absolute; display: inline-block; margin-top: 223px; padding-right: 183px; max-width: 298px; } .sticky:nth-child(2) { width: 215px; height: 122px; overflow: hidden; float: right; margin-right: 0; } .sticky:nth-child(2):hover { background-color: rgba(218, 24, 114, 0.75); transition: all 0.5s ease-in-out; } .sticky:nth-child(2) h2 { display: none; } .sticky:nth-child(2):hover h2 { font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 20px; line-height: 1.2em; display: inline-block; z-index: 10; position: absolute; max-width: 200px; padding: 10px; transition: all 0.5s ease-in-out; } .sticky:nth-child(3) { width: 215px; height: 122px; overflow: hidden; float: right; } .sticky:nth-child(3):hover { background-color: rgba(104, 182, 109, 0.75); transition: all 0.5s ease-in-out; } .sticky:nth-child(3) h2 { display: none; } .sticky:nth-child(3):hover h2 { font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 20px; line-height: 1.2em; display: inline-block; z-index: 10; position: absolute; max-width: 200px; padding: 10px; transition: all 0.5s ease-in-out; } .sticky:nth-child(4) { width: 215px; height: 122px; overflow: hidden; float: right; margin-right: 0; } .sticky:nth-child(4):hover { background-color: rgba(254, 162, 63, 0.75); transition: all 0.3s ease-in-out; } .sticky:nth-child(4) h2 { display: none; } .sticky:nth-child(4):hover h2 { font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 20px; line-height: 1.2em; display: inline-block; z-index: 10; position: absolute; max-width: 200px; padding: 10px; transition: all 0.3s ease-in-out; } .sticky:nth-child(5) { width: 215px; height: 122px; overflow: hidden; float: right; } .sticky:nth-child(5):hover { background-color: rgba(78, 181, 224, 0.75); transition: all 0.3s ease-in-out; } .sticky:nth-child(5) h2 { display: none; } .sticky:nth-child(5):hover h2 { font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 20px; line-height: 1.2em; display: inline-block; z-index: 10; position: absolute; max-width: 200px; padding: 10px; transition: all 0.3s ease-in-out; } 

 <div id="featured_home"> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2015/01/08/the-best-engineering-of-2014/">The best engineering of 2014</a></h2> </div> <img width="600" height="338" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/hand.jpeg" class="attachment-large wp-post-image" alt="hand"> </div> </article> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2014/12/11/girls-who-code-gender-parity-by-2020/">Girls who Code – gender parity by 2020</a></h2> </div> <img width="600" height="400" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/H1B8349-1280x853-1024x682-1024x682.jpg" class="attachment-large wp-post-image" alt="H1B8349-1280x853-1024x682"> </div> </article> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2014/12/10/nobel-prize-winners-grid-cell-dress/">Nobel Prize winner's 'Grid Cell' dress</a></h2> </div> <img width="600" height="429" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/hubbble-2.jpg" class="attachment-large wp-post-image" alt="hubbble-2"> </div> </article> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2014/11/21/code2040-championing-diversity-in-tech/">Code2040 – championing diversity in tech</a></h2> </div> <img width="560" height="373" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/laura.jpg" class="attachment-large wp-post-image" alt="laura"> </div> </article> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2014/11/13/4d-printing/">4D Printing</a></h2> </div> <img width="600" height="338" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/4dprint-1024x576-1024x576.jpg" class="attachment-large wp-post-image" alt="4dprint-1024x576"> </div> </article> </div> 

還有另一種方法可以解決此問題？

Answer 1

使用bottom:0; position:absolute而不是使用margin-top ，它將按您期望的那樣工作。 這樣，文本將從底部擴展。

給出父母的相對位置：

.desc {
    position:relative;
}

將以下樣式添加到粘性h1 ：

.sticky:nth-child(1) h2 {
    position: absolute;
    botton:0;
    margin: 0;
}

JsFiddle示例