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

WBOY
Lepaskan: 2016-06-24 11:31:38
asal
1375 orang telah melayarinya

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

.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;                }
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk


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


.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;                }
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk


因为边框占了宽度所以宽的百分比有点调整 如果我要是在左边加个图片 能让它不超过左边层的大小么
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan