CSS對齊標題，一切都在它下面

Question

我要對齊的標題和摘要（點擊下面的網站上的加號） 如截圖所示 我的網站 http://pligg.marsgibson.info/ 截圖 http://i47.tinypic.com/ntn55.jpg

建議的CSS這

Answer 1

無需改變您當前的標記，一個簡單的解決方法可以是：

CSS

.title h2 { 
    color: #187AAB; 
    font-size: 14px; 
    font-weight: bold; 
    margin: 4px 0 0; 
    padding: 0 20px 0 32px; 
    position: relative; 
} 
.title h2 span { 
    left: 0; 
    position: absolute; 
} 

打印屏幕：

---

我所做的是給一些左，右padding到h2元素，以限制可用於裏面的文本的空間。

然後，爲了將頭像放在適當的位置，我使用了CSS position。

---

EDITED

爲了解決您的觸發要素的問題，請添加到它的CSS：

p.trigger { 
    position: relative; 
    z-index: 1; 
} 

---

EDITED

爲了解決在評論中提到的身高問題！

看到這個工作Fiddle Example！

jQuery的

// run only if elements are found 
if ($('.title').size()>=1) { 

    // initialize variables 
    var $target = $('.title'), 
     size = 0, 
     count = $('.title').size(); 

    // for each element found 
    $target.each(function() { 

    // check the tallest element 
    if (size===0) { 
     size = $target.outerHeight(true); 
    } else { 
     sizeTMP = $target.outerHeight(true); 
     size = (sizeTMP> size) ? sizeTMP : size; 
    } 

    // decrease the counter 
    count--; 

    // counter is 0, set the height 
    if (count===0) { 
     $target.css({ "height" : size + "px" }); 
    } 

    }); 
} 

PS：的CSS display聲明類.subtext1必須更新爲：display:inline-block。