css怎么实现左边高度随右边的高度变化_用css的transform写一个左边比右边高的样式 .about4tab .picbox { wi-CSDN博客

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

在这里插入图片描述

方案一：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>