以下还缺乏绝对自动的垂直居中方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #box{position:relative;border:1px solid #ccc;width: 100%;height: 100px;line-height:33.3px;background-color: aquamarine;} #a > div{position: absolute;color:#000;text-align: left;text-indent: 10px;overflow: hidden;-o-text-overflow:ellipsis;text-overflow: ellipsis;white-space: nowrap;} #a{z-index: 19930710;width: 100%;height: 100%;} #img{left:0px;top:0px;width:25%;height:100%;background-color: aliceblue;} #dian{top:0px;right:0px;height:33.3%;width:75%;background-color: burlywood;} #title{top:33.3%;right:0px;height:33.3%;width:75%;background-color: chartreuse ;} #info{bottom:0px;right:0px;height:33.3%;width:75%;background-color: blueviolet;} </style> </head> <body> <div id="box"> <a id="a" href="#"> <div id="img"><img src="" alt="" /></div> <div id="dian">123</div> <div id="title">123</div> <div id="info">123</div> </a> </div> </body> </html>
时间: 2024-12-15 20:05:38