css怎么实现左边高度随右边的高度变化

最新推荐文章于 2023-05-11 09:56:52 发布

css_666

最新推荐文章于 2023-05-11 09:56:52 发布

阅读量3k

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/css_666/article/details/103701869

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

方案一：flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";    /*不用有内容也可以*/
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
        .content{
            background: pink;
         
            
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items:stretch;
        }
        .left-box{
            width: 200px;
            background: olive;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
          
        }
        .right-box{
            height: auto;
            width: 300px;
            background: red;
            word-break: break-all;
            
        }
    </style>
</head>
<body>
    <div class="content clearfix">
        <div class="left-box"><span>我是左侧</span></div>
        <div class="right-box">你好范德萨发生的是的但是发你好范德萨发生的是的但是发射点发射点发射点发射点发大水发射点发射点发射点范德萨范德萨射点发射点发射点发射点发大水发射点发射点发射点范德萨范德萨</div>
    </div>
</body>
</html>

方案二：table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      
        .left-box{
            width: 200px;
            background: olive;
           
            position: relative;
            padding: 0;
            margin: 0;
        }
        .left-box p{
            padding: 0;
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);   
        }
        .right-box{
            height: auto;
            width: 300px;
            background: red;
            word-break: break-all;
            
        }
    </style>
</head>
<body>
    
    <table>
        <tr>
            <td class="left-box"><p>我是左侧</p></td>
            <td class="right-box">你好范德萨发生的是的但是发你好范德萨发生的是的但是发射点发射点发射点发射点发大水发射点发射点发射点范德萨范德萨射点发射点发射点发射点发大水发射点发射点发射点范德萨范德萨</td>
        </tr>
    </table>
</body>
</html>