设置页面左右结构(其中一端自适应)

在网页中往往需要左右结构,例如下面效果:

设置页面左右结构(其中一端自适应)_第1张图片

那么下面就实现以下:

效果:

设置页面左右结构(其中一端自适应)_第2张图片

代码如下:


<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui" />
        <title>页面左右结构(其中一端自适应)title>
        <style type="text/css">
            /*右边*/
            .my-box{
                width: 100%;
                height: 150px;
                margin-top: 50px;
            }
            .my-box-right{
                width: 100px;
                height: 100%;
                float: right;
                background-color: red;
            }
            .my-box-left{
                overflow: hidden;
                background-color: yellowgreen;
                height: 100%;
            }
            /*左边*/
            .my-box-left2{
                width: 100px;
                height: 100%;
                float: left;
                background-color: red;
            }
            .my-box-right2{
                overflow: hidden;
                background-color: yellowgreen;
                height: 100%;
            }
        style>
    head>
    <body>
        <div class="my-box">
            <div class="my-box-right">
                
                我是右边
            div>
            <div class="my-box-left">
                右边固定,左边自适应!右边固定,左边自适应!右边固定,左边自适应!
                右边固定,左边自适应!右边固定,左边自适应!右边固定,左边自适应!
                右边固定,左边自适应!右边固定,左边自适应!右边固定,左边自适应!
                右边固定,左边自适应!右边固定,左边自适应!右边固定,左边自适应!
            div>
        div>
        <div class="my-box">
            <div class="my-box-left2">
                
                我是右边
            div>
            <div class="my-box-right2">
                左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
                左边固定,右边自适应!左边固定,右边自适应!左边固定,右边自适应!
            div>
        div>
    body>
html>

你可能感兴趣的:(前端)