2017-12-22 2 views
0

テキストが自動的に流れていく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> 
+0

今すぐ確認してください。=> https://jsfiddle.net/9o4ebbfL/14/ –

+1

メータ氏、あなたはその点を持っていません。 1つのdivから別のdivにテキストが流れる必要があり、2回繰り返しません。 –

答えて

0

JSFiddleでCSSを正規化する必要があります。 CSSセクションの右上にあるCSSのCOGをクリックして、正規化されたCSSダニ:

How to normalize CSS in JSFiddle

Explanationを:

正規化されたCSS: デフォルトで選択解除チェックボックス、。これを選択すると、多くのHTMLタグのブラウザーのスタイリングのほとんどを取り除くnormalize.cssでフィドルがレンダリングされます。

+0

申し訳ありませんが、これは私のオフラインhtmlページの問題を解決しません。 –

+0

オフラインhtmlページにnormalize.cssを追加する必要があります:) –

+0

私のページにnormalize.cssを追加しました。結果は無く、まだ空白が残っています。しかし、jsfiddleでは、正規化が機能します。何が間違っているのですか?これは、必要に応じて、すべてのファイルを含むzipです。https://files.fm/u/c4de9b62 –

関連する問題