css - 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，以限制其中文本的可用空间。

然后，为了将头像放在正确的位置，我使用了 CSS position。

---

已编辑

要解决触发元素的问题，请在其 CSS 中添加：

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

---

已编辑

解决评论中提到的身高问题！

请参阅此工作小提琴示例！

查询

// 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:类的 CSSdisplay声明.subtext1必须更新为：display:inline-block.