gpt4 book ai didi

jquery - 文本从一个 div 流向另一个 div

转载 作者:行者123 更新时间:2023-11-28 02:26:23 25 4
gpt4 key购买 nike

我需要一些 div,其中文本自动从一个流到另一个。虽然 css 区域还不成熟,但我发现了这个模拟效果的技巧:https://jsfiddle.net/9o4ebbfL/1/

这个技巧是有效的,但在第一个 div 的开头有一个令人讨厌的空白区域。我怎样才能删除它?奇怪的是,尽管代码是相同的,但我从中提取示例 (http://jsfiddle.net/natedavisolds/bxzCK/16/) 的原始 fiddle 没有额外的空间。

<html lang="it">
<head>
<style type="text/css">
.column {
width: 150px;
height: 200px;
overflow:hidden;
float:left;
border: 1px solid #cccccc;
padding: 0px 20px;
margin: 10px;
}
.column .content {
line-height: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
</head>
<body>

<div id="column1" class="column">
<div class="content">
<p>One plus one is equal to two. Two plus two is equal to four. Three plus three is equal to six. Four plus four is equal to eight. Five plus five is equal to ten. Six plus six is equal to twelve. Seven plus seven is equal to fourteen. Eight plus eight is equal to sixteen. Nine plus nine is equal to eighteen. Ten plus ten is equal to twenty. Eleven plus eleven is equal to twenty-two.</p>
</div>
</div>

<div class="column" data-overflow="#column1">

<script>
$('.column[data-overflow]').each(function(index) {
var $this = $(this),
$parent = $($this.data('overflow')),
colHeight = $parent.innerHeight(),
scroll = parseInt(colHeight) * (index + 1),
newHeight = "-=" + scroll + "px";

$this.html($parent.html())
.find('.content').css({ marginTop: newHeight});

});
</script>

</body>
</html>

最佳答案

您需要在 JSFiddle 中规范化您的 CSS。单击 CSS 部分右上角的 CSS 齿轮,然后勾选 Normalized CSS:

How to normalize CSS in JSFiddle

Explanation :

Normalized CSS: A checkbox, deselected by default. If selected, the fiddle will be rendered with normalize.css which is removing most of the browser styling of many HTML tags.

关于jquery - 文本从一个 div 流向另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47941261/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com