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

---

編集済み

コメントで言及されている高さの問題に対処するために！

この実用的なフィドルの例を参照してください!

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:クラスの CSSdisplay宣言を次の.subtext1ように更新する必要があります: display:inline-block.