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>
网友评论