-2

我希望对齐标题和摘要(单击下面的加号站点),如屏幕截图所示我的网站 http://pligg.marsgibson.info/ 屏幕截图 http://i47.tinypic.com/ntn55.jpg

为此建议css

4

1 回答 1

0

在不更改当前标记的情况下,一个简单的修复可以是:

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.

于 2012-06-09T01:35:28.160 回答