H5 布局tips

最新推荐文章于 2024-04-05 09:57:38 发布

Micah_A

最新推荐文章于 2024-04-05 09:57:38 发布

阅读量690

点赞数

分类专栏： H5 文章标签： css 布局

本文链接：https://blog.csdn.net/lvchenqiang_/article/details/78758783

版权

H5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求

实现左右图片中间文字布局，限制文字一行显示不下的用…代替

实现效果

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>