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;
}

打印屏幕：

---

我所做的是向h2元素提供一些左右padding，以限制其中文本的可用空间。

然后，为了将头像放在合适的位置，我使用了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：类display的CSS .subtext1声明必须更新为：display:inline-block。