ctfgergrthh

最新推荐文章于 2021-08-31 18:02:44 发布

huanxiangcoco

最新推荐文章于 2021-08-31 18:02:44 发布

阅读量295

点赞数

分类专栏： CSS3、pink CSS3

本文链接：https://blog.csdn.net/huanxianxianshi/article/details/105782602

版权

CSS3 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS3、pink

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            .parent {
            width: 100%;
            background: pink;
        }
        
        .box {
            width: 1140px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: row;
            background: yellow;
            margin-bottom: 10px;
        }
        
        .left {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        .right {
            flex-grow: 1;
            margin-left: 10px;
            background-color: lime;
        }
        
        .right h1 {
            background: red;
            max-width: 800px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        
        h1:hover {}
        
        .b1 {
            display: block;
            width: 33.33%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            background: red;
        }
        
        .b1:hover {
            opacity: 0.5;
        }
        
        p {
            text-overflow: ellipsis;
            width: 200px;
            height: 20px;
            word-wrap: break-word;
        }
        
        @media screen and (max-width: 900px) {
            .box {
                width: 200px;
                background: red;
                flex-direction: column;
            }
            .right {
                margin-left: 0;
            }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box">
            <div class="left">
                <img src="1.jpg" alt="">
            </div>
            <div class="right">
                <h1 title="vghhsbaygdxsajxhjsaxhsgtxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">vghhsbaygdxsajxhjsaxhsgtxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
                <a href="#" class="b1">bjhhnhihtyukuirgttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</a>
                <p>defbhhuyyyyyyyyffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
            </div>
        </div>
        <div class="box">

            <img src="1.jpg" alt="" class="left">

            <div class="right">
                <h1 title="">vghhsbaygdxsajxhjsaxhsgthtyuyi7xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>

            </div>
        </div>
    </div>

</body>

</html>

https://blog.csdn.net/guoyiq/article/details/79353096
https://blog.csdn.net/angular_/article/details/62426359

huanxiangcoco

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ctfgergrthh

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫