查看此代码:http://jsfiddle.net/ZXN4S/1/
HTML:<div class="input">
<input type="text" size="50" id="test_input">
<input type="submit" value="send" id="test_submit">
</div>
<ul>
<li class="clear">
<div class="comment">
<div class="image">
<img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
</div>
<div class="info">
<div class="name">Name</div>
<div class="text">text</div>
<div class="timestamp">timestamp</div>
</div>
</div>
</li>
</ul>
jQuery: $(document).ready(function() {
$("#test_submit").click(function() {
$.post('/echo/json/', function(data) {
last = $("ul li:first-child");
new_line = last.clone();
new_line.hide();
last.before(new_line);
new_line.slideDown('slow');
});
return false;
});
});
如果你试着在输入字段中插入一些文本并点击提交,你可以看到我所说的问题。当它滑下时,滑块的高度不对,效果很难看。但如果你删除div info
,它工作得很好。我该如何修复?
设置:
ul li .info {
float: left;
}
为我做了(在chrome中测试)
这个技巧似乎解决了这个问题:
ul li .info {
float: right;
width: 485px; // fixed width to the div
}
问题在于布局模型。在大多数浏览器中,你可以添加overflow:hidden来为元素提供布局:
ul li .info {
overflow: hidden;
}
也能解决它。你也可以选择固定你的宽度,但这不是必需的。
额外的迂腐的帮助,你实际上没有要求:
你正在使用"return false"来阻止默认事件。这里有一个函数,它可以更有效地描述事件是如何形成的。只需将事件传递给函数(您可以使用任何您想要的名称,但为了清晰起见,我将其称为"event"),然后在其上调用preventDefault()
:
$("#test_submit").click(function(event) {
event.preventDefault()
// ... the rest of your code ... //
});
在JS Fiddle中播放后,这似乎已经完成了技巧:
在你的CSS中,ul li .info { }
添加:height: 50px;