Home > Web Front-end > HTML Tutorial > 求移动端一个这样的表格该怎样做_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:31:38
Original
1410 people have browsed it

要自适应屏幕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;                }
Copy after login
Copy after login
Copy after login

.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;                }
Copy after login
Copy after login
Copy after login


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


.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;                }
Copy after login
Copy after login
Copy after login


因为边框占了宽度所以宽的百分比有点调整 如果我要是在左边加个图片 能让它不超过左边层的大小么
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template