如何在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

回答

相关问题