页面布局实例--多栏嵌套自适应
2016-12-29 本文已影响18人
Sraita
Paste_Image.png
Paste_Image.png
代码：
<html>
<head>
<style>
/* 三列中间自适应布局 */
*{margin: 0;padding: 0}
.head{margin:0; height: 40px;}
.leftButton,.rightButton{position:relative;float:left; height: 40px;line-height: 40px;width:64px;margin:0 -64px 0 0; background: red}
.rightButton{float:right;width:64px;margin:0 0 0 -64px;}
.user{float:left;width:100%; text-align: center;height: 40px;line-height: 40px;}
.userContent{margin:0 64px 0 64px;}
.userhelp{display: table; margin: 0 auto;}
.rightContent{outline: 1px solid blue;margin-left:50px;}
.left{position:relative;float:left;width:40px;margin-right:-40px;}
.right{float:right;width:100%;}
.userName,.createdAt{height: 20px; line-height: 20px;text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all; /* 英文字符处理*/
}
img{margin: 5px}
</style>
</head>
<body>
<div class="head">
<div class="leftButton">
<p>左侧定宽</p>
</div>
<div class="user">
<div class="userContent">
<div class="userhelp">
<div class="left">
<img src="" height="32" width="32"/>
</div>
<div class="right">
<div class="rightContent">
<div class="userName">这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</div>
<div class="createdAt">这是副标题这是副标题这是副标题这是副标题这是副标题</div>
</div>
</div>
</div>
</div>
</div>
<div class="rightButton">
<p>右侧定宽</p>
</div>
</div>
</body>
</html>
