Css位置角落絕對左下角

Question

我想爲我的設計添加一個補充角落，並且無論該框中的內容大小如何，都應該在內容框下進行添加。

正如你可以看到那裏的角落適合第二個盒子，但不適合第一個。

這裏是一個小提琴http://jsfiddle.net/cnmWh/

HTML代碼在這裏：

<div class="title_container"> 
     <div class="hook_bottom_left"></div> 
     <div class="title "> 
     <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> 
    </div> 


<div class="title_container"> 
     <div class="hook_bottom_left"></div> 
     <div class="title "> 
     <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> 
      </div> 
    </div> 

此處的CSS：

.title_container {position: relative; min-height: 112px; padding-top: 25px; padding-bottom: 5px; display:block;} 
.title { position: absolute; background:url("img/hash_light.png"); border: 1px solid #c8c8c8; padding: 15px; z-index: 10; 
    width: -moz-calc(100% - 16px); 
    width: -webkit-calc(100% - 16px); 
    width: -o-calc(100% - 16px); 
    width: calc(100% - 16px); 
    margin-top: 8px; 
    margin-left: 8px; 
    overflow: hidden; } 

.hook_bottom_left{position: absolute; left:0; bottom:17px; border-left: 8px solid #000; border-bottom:8px solid #000; width: 40px;height: 40px;} 

Answer 1

看一看this JsFiddle

我帶走min-height，發文position:relative;並將其作爲bottom:0。

min-height如果它小於122px，它不會讓鉤子進入底部，這就是爲什麼當它在bottom:0;上時，它會在它下面晃動。

文本是position:absolute這意味着它們沒有佔用任何寬度（導致各種重疊錯誤）。只要他們是position:relative，掛鉤可以得到他們正確的高度。

---

JsFiddle with :before element

這一個帶走

<div class="hook_bottom_left"></div> 

，而是插入 '鉤' 上.title_container使用:before。

這意味着您不再需要使用div作爲掛鉤，而.title_container類將自動生成掛鉤。