Question

我正在尝试制作一本可以同时显示2页的书。

每个页面都有2列文字，我想将列的溢出移到下一列而不改变经文的顺序。

当前版本：

和JS代码（使用jQuery）：

$('.column').on('mouseenter mousemove mouseover', function(){


    var column = $(this);
    var feelz = column.find('.feel');
    var columnH = column.height();
    var feelzH = feelz.height();

    var nextcolumn =  $('.column.nextcolumn')
    var column_lastverse = column.find('.feel .verse:last-child');
    var nextcolumn_firstverse = nextcolumn.find('.feel .verse:first-child');

    if (feelzH > columnH)
    {       
        column.addClass('full');
        $('.column.full').next('div.column').addClass('nextcolumn');

        if (column.hasClass('full'))
        {
            column.removeClass('nextcolumn');
            $('.column.full').next('div.column').addClass('nextcolumn'));
        }
        column_lastverse.insertBefore(nextcolumn_firstverse);

    }
    else 
    {
        $(this).removeClass('full');
    }
});

HTML代码：

        <div><!-- starts 1st page -->
    <div class="top_page"></div>
    <div class="bottom_page"></div>
    <div class="column left"><!--1-->
        <div class="feel">
            <div class="verse">
                <div class="chapter"><span></span> NO princípio criou Deus o céu e a terra.</div></div>
     </div><!-- feelz -->
    </div><!--end column-->
    <div class="column right"><!--1-->
        <div class="feel">
            <div class="verse nospace"></div><!---->
    </div><!-- feelz -->
    </div><!--end column-->
    </div><!-- end page -->
    <div><!-- starts 2nd page-->
    <div class="top_page"></div>
    <div class="bottom_page"></div>        
    <div class="column left">
        <div class="feel">
        <div class="verse nospace"></div>
        </div><!-- feelz -->
    </div><!--end column-->
    <div class="column right"><!--1-->
        <div class="feel">
        <div class="verse nospace"></div>
        </div><!-- feelz -->
    </div><!--end column-->
    </div><!-- end page -->

还有CSS代码：

.column 
{
	border-radius:0; 
	height:90%; 
	width:43%;
	top:5%;
	position:absolute;
	overflow-y:visible; 
	padding-left:0; 
	text-align: center; 
	font-size:20px; 
	font-weight: bold;
}
.left
{
	left:5%;
}
.right
{
	right:5%;
}
.feel 
{ 
	width:100%; 
	height:auto; 
	max-height:1000%; 
	min-height:inherit;
	position:absolute; 
	left:0;
}
.verse
{
	display: block;
	width: 100%;
	text-align: justify;
	font-size: 16px;
	line-height: 20px;
	font-weight: normal;
	font-family:"Arial", Gadget, sans-serif;
}

期望的结果：

欢迎任何建议:)

Answer 1

没有必要在jquery中执行此操作，您可以使用CSS属性columns来实现此目的。

查看此CSS Tricks页面。

使用CSS：

columns: <column-width> || <column-count>;

示例：

[Selector]{
    -webkit-columns: 300px 2;
       -moz-columns: 300px 2;
            columns: 300px 2;
}

这样就可以了解

如何将容器的溢出div移动到下一个容器

1 个答案: