web前端左右布局demo

最新推荐文章于 2024-08-08 13:55:38 发布

zhaihaohao1

最新推荐文章于 2024-08-08 13:55:38 发布

阅读量2.4k

点赞数

分类专栏： web前端demo

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47815839

版权

web前端demo 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<!--模仿掌金官网业务中心布局-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css06.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="left">
            <img class="img" src="images/img_03.jpg">
        </div>
        <div class="meddle">

        </div>
        <div class="right">
            <p class="pstart">我的元素p1</p>
            <p class="pmeddle">审定有无，与其虚实，随其嗜欲以见其志意。
                微排其言而捭反之，以求其实，贵得其指。阖而捭之，以求其利。
                或开而示之，或阖而闭之。开而示之者，同其情也。阖而闭之者，
                异其诚也。可与不可，审明其计谋，以原其同异。离合有守，先从其志。
                即欲捭之，贵周；即欲阖之，贵密。周密之贵微，而与道相追。
            </p>
            <p class="pfoot">我的元素p3</p>
        </div>
        <div class="jiange"></div>
    </div>

    <div class="container">
        <div class="left">
            <img class="img" src="images/img_03.jpg">
        </div>
        <div class="meddle">

        </div>
        <div class="right">
            <p class="pstart">我的元素p1</p>
            <p class="pmeddle">审定有无，与其虚实，随其嗜欲以见其志意。
                微排其言而捭反之，以求其实，贵得其指。阖而捭之，以求其利。
                或开而示之，或阖而闭之。开而示之者，同其情也。阖而闭之者，
                异其诚也。可与不可，审明其计谋，以原其同异。离合有守，先从其志。
                即欲捭之，贵周；即欲阖之，贵密。周密之贵微，而与道相追。
            </p>
            <p class="pfoot">我的元素p3</p>
        </div>
        <div class="jiange"></div>
    </div>


</body>
</html>
css:
*{
    margin: 0px;
    padding: 0px;
}
.container{
    width: 100%;
    height: 200px;
}
.container .left{
    width: 20%;
    height: 100%;
    float: left;
    background-color: #b3d4fc;
    position: relative;
}
.container .left .img{
    width: 90%;
    height: 90%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.container .meddle{
    width: 2%;
    height: 100%;
    float: left;
    background-color: #cccccc;
}
.container .right{
    width: 78%;
    height: 100%;
    float: left;
    background-color: #cccccc;
}

.container .right .pstart{
     /*line-height: 400%;*/
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.container .right .pmeddle{
    /*line-height: 200%;*/
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.container .right .pfoot{
    /*line-height: 400%;*/
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;

}
.jiange{
    width: 100%;
    height: 5%;
    float: left;
    background-color: inherit;

}