css - 文章分页类拆分 div 并弄乱页面布局

Question

该类通过在找到 [next] 的任何地方展开内容来工作。但问题是 next 被包裹在 div 中，所以它变成了 <div>[next]</div> ，这是因为我使用的是所见即所得的编辑器。当它在第一页上找到 [next] 时，</div>在它转移到第二页等之后，阻碍了布局。

所以要展开文本的类:

function splitText($pageCont){ 
        $this->textarray = explode('[next]', $pageCont);
        $this->numPages = count($this->textarray); 
    }

和回显文本 block 的类

function getContent(){ 
        if($this->page != 0){ 
        echo $this->pageCont;  
        } else { 
        echo $this->textarray[0]; 
        } 
    } 

问题是，我怎样才能阻止这种情况发生，或者使主 div 中的 div 不影响页面布局？就好像现在当 div 吐出时它会将右列推到右下角

由 kuh-chan 编辑的完整代码

class Pagebreak { 

    private $page; //page number 
    private $numPages; //number of total pages 
    private $textarray = array(); // array of conents 
    private $pageCont; //current page content 

    public function __construct(){  
        if (!isset($_GET['page'])) { 
        $this->page = 0; 
        } else {
        $this->page = $_GET['page'];  
        }      
    } 

    public function splitText($pageCont){  
        $this->textarray = preg_split('/(?<!\<div\>)\[next\]/', $pageCont);
        $this->numPages = count($this->textarray); 
    } 

    public function setPage(){ 
        $this->pageCont = $this->textarray[$_GET['page'] -1]; 
    } 

    public function getContent(){ 
        if($this->page != 0){ 
        echo $this->pageCont;  
        } else { 
        echo $this->textarray[0]; 
        } 
    } 

    public function getPageLinks(){ 

        echo "<p class=\"article_page_div\">\n";     

        //prev page 
        //if page number is more then 1 show previous link 
        if ($this->page > 1) { 
            $prevpage = $this->page - 1; 
            echo "<a class=\"article_paging\" href=\"?post=".$_GET['post']."&amp;page=$prevpage\">". 'Prev</a> '; 
        }  

        //page numbers   
        for($i = 1; $i <= $this->numPages ; $i++){ 
            if($this->numPages > 1){ // if more then 1 page show links 
                if(($this->page) == $i){ //if page number is equal page number in loop don't link it 
                    echo "$i\n "; 
                    } else {                     
                            if($this->page == 0){ //if no page numbers have been clicked don't link first page link 
                                if($i == 1){ 
                                    echo "$i\n "; 
                                } else { // link the rest 
                                    echo "<a class=\"article_paging\" href=\"?post=".$_GET['post']."&amp;page=$i\">$i</a>\n "; 
                                }  
                           } else { // link pages 
                                echo "<a class=\"article_paging\" href=\"?post=".$_GET['post']."&amp;page=$i\">$i</a>\n "; 
                            }                          
                    } 
            }              
        } 

        //next page 
        //if page number is less then the total number of pages show next link 
        if ($this->page <= $this->numPages - 1) { 
            if($this->page == 0){ //if no page numbers have been clicked minus 2 from the next page link 
                $nextpage = $this->page + 2; 
            } else { 
                $nextpage = $this->page + 1; 
                } 
                echo "<a class=\"article_paging\" href=\"?post=".$_GET['post']."&amp;page=$nextpage\">". 'Next</a>'; 
        } 

        echo "</p>\n";     

    } 

} 

然后调用你刚刚使用的这个类:

$paginate = new Pagebreak(); 
$paginate->splitText($storyCont); 
$paginate->setPage(); 
$paginate->getContent(); 
$paginate->getPageLinks();  

Answer 1

the question is, how can I either stop this from happening, or make it so that the divs within the main div does not affect the page layout? as if now when the divs spit it pushes the right column to the right bottom

使用以下 CSS 属性之一从页面流中删除 div:

• position:absolute
• 职位:固定

使用以下 CSS 属性将主 div 用作定位 div 的容器:

• position:relative