H5 布局tips
程序员文章站
2022-07-14 22:10:48
...
需求
实现左右图片 中间文字布局，限制文字一行 显示不下的 用…代替
实现效果
CSS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
}
.header{
color: white;
background-color: #999;
font-size: 18px;
}
.bullet-title{
float: left;
margin-left: 10px;
width: 20px;
height:20px;
background-color: blue;
}
.bullet-content{
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
margin-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
float: left;
height: 20px;
line-height: 20px;
width:calc(100vw - 80px);
color: red;
}
.bullet-image{
float: right;
width: 20px;
height: 20px;
background-size: 20px 20px;
background-repeat: no-repeat;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="bullet-wrapper">
<img src="http://img2.imgtn.bdimg.com/it/u=400401121,3823676335&fm=27&gp=0.jpg" class="bullet-title">
<div class="bullet-content">了解一点的 我去二群无王二去玩儿我去二去玩儿群无去玩儿群而且去玩儿企鹅王若群额确认去玩儿群而且去玩儿确认去 委屈</div>
<img src="http://img2.imgtn.bdimg.com/it/u=400401121,3823676335&fm=27&gp=0.jpg" class="bullet-image">
</div>
</div>
</body>
</html>效果：
Flex布局
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
}
.header {
color: white;
background-color: #999;
font-size: 0px;
}
.bullet-wrapper {
display: -webkit-flex;
flex: 1;
justify-content: space-between;
align-items: center;
/*主轴水平 默认值*/ /*flex-direction: row;*/
height: 40px;
}
.bullet-wrapper .bullet-title {
width: 40px;
margin-left: 10px;
}
.bullet-wrapper .bullet-content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
background-color: red;
}
.bullet-wrapper .bullet-image {
width: 40px;
height: 40px;
margin-right: 10px;
flex: 1;
}
.bullet-wrapper .bullet-image img{
width: 40px;
height: 40px
}
</style>
</head>
<body>
<div class="header">
<div class="bullet-wrapper">
<img src="http://img2.imgtn.bdimg.com/it/u=400401121,3823676335&fm=27&gp=0.jpg" class="bullet-title">
<div class="bullet-content">了解一点的 我sdadsasdadasdasdadasdadaxcxxcvxvxcvxcvxcv去二群无王二去玩儿我去二去玩儿群无去玩儿群而且去玩儿企鹅王若群额确认去玩儿群而且去玩儿确认去 委屈</div>
<div class="bullet-image">
<img src="http://img2.imgtn.bdimg.com/it/u=400401121,3823676335&fm=27&gp=0.jpg">
</div>
</div>
</div>
</body>
</html>效果: