Question

我需要一些div，其中文本自动从一个到另一个。虽然css区域仍然未成熟，但我发现这个技巧可以模拟效果：https://jsfiddle.net/9o4ebbfL/1/

诀窍是有效的，但在第一个div的开头有一个烦人的空白区域。我怎么能删除它？奇怪的是，我画了我的例子（http://jsfiddle.net/natedavisolds/bxzCK/16/）的原始小提琴没有额外的空间，尽管代码是相同的。

<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>

Answer 1

您需要在JSFiddle中规范化CSS。单击CSS部分右上角的CSS cog，勾选规范化CSS ：

Explanation：

规范化的CSS：默认情况下取消选中的复选框。如果选中，则将使用normalize.css呈现小提琴，这将删除许多HTML标记的大部分浏览器样式。

从div流向div的文本

1 个答案: