如何在jQuery中調整ul，div p

我在我的網站中有一個時間線功能，在某一年文本可能非常長，有些可能只有1行，我想調整頁面大小，以便當用戶在下一年點擊該頁面並非真的很長，只有一行？如何在jQuery中調整ul，div p

IM使用timeliner JS從 http://www.csslab.cl/ejemplos/timelinr/latest/js/jquery.timelinr-0.9.5.js

<ul id="dates"> 
<li><a href="#1940s">1940s</a></li> 
<li><a href="#1950s">1950s</a></li> 
</ul> 
<ul id="issues"> 
<li id="1940s"><img src="/timeline/1950.jpg" /> 
<h1>1940's</h1> 
<p>RonaldertreRonaldertreRonaldertrevRonaldertre Ronaldertre RonaldertreRonaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertre vkv RonaldertreRonaldertre kRonaldertre Ronaldertre Ronaldertre Ronaldertre Ronaldertrekv Ronaldertre RonaldertreRonaldertre Ronald &ldquo;Eddy&rdquo; Edmonson a qualified architect and surveyor joined the Royal Artillery in WW2. At the end of vre RonaldertreRonaldertre Ronald &ldquo;Eddy&rdquoWar he found himself stationed in Turin, and became interested in a nearby factory where the Germans held early experiments in plastic injection moulding. After being re RonaldertreRonaldertre Ronald &ldquo;Eddy&rdquo; Edmonson a qualified architect and surveyor joined the Royal Artillery in WW2. At the end of the War he found himself stationed in Turin, and became interested in a nearby factory where the Germans held early experiments in plastic injection moulding. After being re RonaldertreRonaldertre Ronald &ldquo;Eddy&rdquo; Edmonson a qualified architect and surveyor joined the Royal Artillery in WW2. At the end of the War he found himself stationed in Turin, and became interested in a nearby factory where the Germans held early experiments in plastic injection moulding. After being the War he found himself stationed in Turin, and became interested in a nearby factory where the Germans held early experiments in plastic injection moulding. After being Demobbed back at home, Eddy took this interest further and on 18th October 1946 set up plastic moulding company, Plastiers Limited (Lewisham). He is pictured (right) manning his first commercial production run! RonaldertreRonaldertreRonaldertreRonaldertreRonaldertrevRonaldertreRonaldertre test test test.</p> 
</li> 
<li id="1950s"><img src="/timeline/1960.jpg" /> 
<h1>1950's</h1> 
<p>Eddy.</p> 
</li> 

</li> 
</ul>

實施例這裏：

http://jsfiddle.net/uzi002/sEFQS/1/

編輯：

jquery的IVE嘗試：

$("#dates li a").click(function() { 
     $('#issues').css("height", $("#" + $(this).html()).height()); 
    });

來源

2012-03-23 Beginner

武漢理工大學，這個問題確實是模糊的... – Phil 2012-03-23 14:32:58

我如何調整頁面的高度作爲文本的變化當你沿着時間軸 – Beginner 2012-03-23 14:36:30

使用CSS寬度&高度

如果你希望它是動態的，用JS檢查長度並更新CSS寬度時，文本改變

編輯：

這個例子是爲寬度。檢查你的頁面元素是否有一個好的容器，它會給你你正在尋找的高度。

的寬度，你可以這樣做

/* Give your paragraph an Id to be able to get them <p id="paragraph"></p> */ 
var text = document.getElementById("paragraph").innerHTML; 
//alert(text.length); 
$('#issues').width(text.length) 
//$('#issues').height(/* preferred height goes here */)

然後找到一個很好的措施，設置寬度，不一定相同字符串的長度。

如果您找到一個具有合適高度的容器，只需抓住它的高度並更新其他元素即可。

如果你想根據文本來確定高度，那意味着你將不得不預測頁面上斷開的行數。這取決於頁面佈局/屏幕大小和分辨率。因此，爲屏幕寬度（可能爲1024）選擇一個數字，然後檢查佈局需要打破多少行。通過動態檢查所有內容並進行計算，您可以做得更多。國際海事組織，它不應該是一個複雜的解決方案，但這取決於它對你有多重要。

有時，將身高設置爲100％並將其放在適當的位置將使其自行處理。

來源

2012-03-23 14:32:29

是的，這就是我想要做的任何實例如何測量身高？我知道.css（'高度'，''）我可以改變高度，但我從哪裏得到高度改變？ – Beginner 2012-03-23 14:35:02

你的問題不是很清楚。爲什麼不僅僅應用一些樣式來約束它的寬度？

p { 
    width: 200px; 
    height: 200px; 
    overflow: hidden; //or other value to suit your needs 
}

這是你更新的提琴：http://jsfiddle.net/sEFQS/2/

來源

2012-03-23 14:29:49

去的問題與高度沒有寬度 – Beginner 2012-03-23 14:30:58

所以，你要切文字是否太高？你可以使用'overflow'屬性。查看更新的示例。 – 2012-03-23 14:31:32

@Beginner檢查這個小提琴：http://jsfiddle.net/sEFQS/2/ – 2012-03-23 14:36:08

如何在jQuery中調整ul，div p

回答

相關問題