テキストが自動的に流れていくdivが必要です。 CSSの領域はまだ未熟だが、このトリックで効果をシミュレートすることができた。https://jsfiddle.net/9o4ebbfL/1/
トリックは有効であるが、最初のdivの先頭に厄介な空白がある。どうすれば削除できますか?不思議なことに、私の例(http://jsfiddle.net/natedavisolds/bxzCK/16/)を描いた元のフィドルは、コードが同じであるにもかかわらず、余分なスペースはありません。divからdivに流れるテキスト
<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>
今すぐ確認してください。=> https://jsfiddle.net/9o4ebbfL/14/ –
メータ氏、あなたはその点を持っていません。 1つのdivから別のdivにテキストが流れる必要があり、2回繰り返しません。 –