欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

求移动端一个这样的表格该怎样做_html/css_WEB-ITnose

程序员文章站 2022-05-24 12:02:55
...
要自适应屏幕div+css 是h5
横着40%、60% 右边上下80%、20%


回复讨论(解决方案)

那你直接写啊
左面div 40%宽度 右面div 60%宽度

最前面加这个样式

那你直接写啊
左面div 40%宽度 右面div 60%宽度

最前面加这个样式

主要就是右边那个大层里几个小的怎么写

不会用div就用table套table吧 也是可以的

不会用div就用table套table吧 也是可以的

table我会 就是想换成css+div提高性能

.maxdiv {            width:100%;            height:400px;            border:1px red solid;        }        .leftdiv {            width: 39%;            height: 400px;            border:1px black solid;            float:left;        }        .rightdiv {            width: 59%;            height: 400px;            border: 1px blue solid;            float: left;        }        .rightdiv .rightdiv_top {            width:100%;            border:1px green solid;            height:80%;        }            .rightdiv .rightdiv_bottom {                width: 100%;                border: 1px red solid;                height: 20%;            }                .rightdiv .rightdiv_bottom .left {                    width: 29%;                    border: 1px red solid;                    height: 100%;                    float: left;                }                .rightdiv .rightdiv_bottom .middle {                    width: 38%;                    border: 1px red solid;                    height: 100%;                    float: left;                }                .rightdiv .rightdiv_bottom .right {                    width: 29%;                    border: 1px red solid;                    height: 100%;                    float: left;                }

.maxdiv {            width:100%;            height:400px;            border:1px red solid;        }        .leftdiv {            width: 39%;            height: 400px;            border:1px black solid;            float:left;        }        .rightdiv {            width: 59%;            height: 400px;            border: 1px blue solid;            float: left;        }        .rightdiv .rightdiv_top {            width:100%;            border:1px green solid;            height:80%;        }            .rightdiv .rightdiv_bottom {                width: 100%;                border: 1px red solid;                height: 20%;            }                .rightdiv .rightdiv_bottom .left {                    width: 29%;                    border: 1px red solid;                    height: 100%;                    float: left;                }                .rightdiv .rightdiv_bottom .middle {                    width: 38%;                    border: 1px red solid;                    height: 100%;                    float: left;                }                .rightdiv .rightdiv_bottom .right {                    width: 29%;                    border: 1px red solid;                    height: 100%;                    float: left;                }

因为边框占了宽度所以宽的百分比有点调整


.maxdiv {            width:100%;            height:400px;            border:1px red solid;        }        .leftdiv {            width: 39%;            height: 400px;            border:1px black solid;            float:left;        }        .rightdiv {            width: 59%;            height: 400px;            border: 1px blue solid;            float: left;        }        .rightdiv .rightdiv_top {            width:100%;            border:1px green solid;            height:80%;        }            .rightdiv .rightdiv_bottom {                width: 100%;                border: 1px red solid;                height: 20%;            }                .rightdiv .rightdiv_bottom .left {                    width: 29%;                    border: 1px red solid;                    height: 100%;                    float: left;                }                .rightdiv .rightdiv_bottom .middle {                    width: 38%;                    border: 1px red solid;                    height: 100%;                    float: left;                }                .rightdiv .rightdiv_bottom .right {                    width: 29%;                    border: 1px red solid;                    height: 100%;                    float: left;                }

因为边框占了宽度所以宽的百分比有点调整 如果我要是在左边加个图片 能让它不超过左边层的大小么