PHP界面复用以及利用after伪类元素清除浮动float所产生的塌陷

最新推荐文章于 2021-03-12 20:55:18 发布

Coder400

最新推荐文章于 2021-03-12 20:55:18 发布

阅读量378

点赞数

分类专栏： PHP 文章标签： php 界面 class 函数

本文链接：https://blog.csdn.net/qq_35160309/article/details/60957636

版权

PHP 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

controllers代码：

<?php

/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2017/2/24
 * Time: 16:15
 */
class MyTest extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
    }
    function test1(){
        $this->load->view('/mytest/one');
        $this->load->view('/mytest/two');
        $this->load->view('/mytest/three');
        $this->load->view('/mytest/five');
        $this->load->view('/mytest/four');

    }
    function test2(){
        $this->load->view('/mytest/one');
        $this->load->view('/mytest/two');
        $this->load->view('/mytest/three');
        $this->load->view('/mytest/five_2');
        $this->load->view('/mytest/four');
    }

views代码：

one

<!doctype html>
<html>

<body>

<div style="border: 2px solid  chartreuse;margin-top: 20px">

    <p>我是div111</p>

</div>
</body>

</html>

two

<!doctype html>
<html>

<style>
    .big {
        border: 4px solid red;
        position: relative;
        width: 100%;
        height: 600px;
        margin-top: 20px
    }

    /*对big标签的所有子元素都向右浮动*/
    .big > * {
        float: left;
        margin-left: 20px;
    }

    /*清除浮动*/
    .big:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .two{
        border:4px solid #fcff32;
        width: 200px;
        height: 200px;
        float: left;
        margin-top: 10px
    }


</style>


<body>
<div class="big">
    <strong>我是大的容器</strong>
    <div class="two">

        <p>我是div222</p>

    </div>


</body>

</html>

three

<!doctype html>
<html>
<body>

<div style="border: 2px solid  #27fffc;width: 500px;float: left;height: 500px;margin-top: 10px">

    <p>我是div333</p>

</body>

</html>

four

<!doctype html>
<html>
<head>

</head>
<body>

<div style="border: 2px solid  #212fff;margin-top: 10px" >

    <p>我是div444</p>

</div>
</body>

</html>

five

<!doctype html>
<html>

<style>
    #five{
        border: 2px solid  #b328ff;
        position: absolute;
        clear: both;
        float: right;
        margin-left: 410px;
        margin-top: -50px;
    }
</style>
<body>

<div id="five" >

    <p>我是div555</p>

</div>

</div>

</div>

</body>

</html>

five_2

<!doctype html>
<html>

<body>

<div style="border: 2px solid  #b328ff;position: absolute;float: right">

    <p>我是被复用的div555</p>

</div>

</div>

</div>

</body>

</html>