我要對齊的標題和摘要(點擊下面的網站上的加號) 如截圖所示 我的網站 http://pligg.marsgibson.info/ 截圖 http://i47.tinypic.com/ntn55.jpgCSS對齊標題,一切都在它下面
建議的CSS這
我要對齊的標題和摘要(點擊下面的網站上的加號) 如截圖所示 我的網站 http://pligg.marsgibson.info/ 截圖 http://i47.tinypic.com/ntn55.jpgCSS對齊標題,一切都在它下面
建議的CSS這
無需改變您當前的標記,一個簡單的解決方法可以是:
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。
爲了解決您的觸發要素的問題,請添加到它的CSS:
p.trigger {
position: relative;
z-index: 1;
}
爲了解決在評論中提到的身高問題!
看到這個工作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
。
謝謝,但這樣做會使jQuery(加號)不能有效地工作 現在只需要一個特定的區域來點擊展開/合同剩餘的摘要 什麼可能是它不擴展/收縮點擊任何部分的原因加號 ? – user1445629
@ user1445629,爲了解決這個問題,只需在你的'p.trigger'中添加這個CSS:'position:relative; z-index:1;'。 – Zuul
是的,它的工作原理感謝 最後一件事 注意兩行標題和一行標題的區別 兩個標題的高度都相同 單行標題的高度可以小於2行標題嗎? 看到圖片 http://i50.tinypic.com/iddjdw.jpg – user1445629
您應該向我們展示您已經擁有的HTML/CSS,以及您嘗試解決您遇到的問題的方法。 – sachleen
我的css在這裏 http://pligg.marsgibson.info/templates/wistie/css/style.css 我試過用 margin:0px 10px 0px 75px; padding:0px 20px 0px 0px; in .title h2 span,.title h2 a { 但did not工作 – user1445629
-1並且還投票關閉OP。 _「這裏是我的網站,爲我修復」_類型的問題是不受歡迎的。 – Sparky