Heim  >  Artikel  >  Web-Frontend  >  求移动端一个这样的表格该怎样做_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:31:381325Durchsuche

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


因为边框占了宽度所以宽的百分比有点调整 如果我要是在左边加个图片 能让它不超过左边层的大小么
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn