提问者:小点点

我怎样才能使按钮向右,固定中间部分,使所有东西都可以调整尺寸


我的html中有3个部分

  1. TextArea
  2. 标签和下面的两个按钮
  3. 道路按钮

我怎样才能使一切可调整大小,并有秒节固定,所以它不调整大小(标签和以下2个按钮),并有3个按钮路走在右边,不移动,它应该是固定的。

所以简单来说,文本区域应该是可调整的,而右边的秒区和按钮应该是固定的。

null

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <div id="main_section" class="container">
            <div class="cstm-item d-flex"> 
                <div class="">
                    <textarea name=""></textarea> 
                </div>
                <div  class="h-100 text-center">
                    <span>LEFT RIGHT</span>                 
                    <div>
                        <button><i class="fa fa-minus"></i></button>
                        <button><i class="fa fa-plus"></i></button>
                    </div>
                </div>          
            </div>
            <div>
                <button><i class="fa fa-road"></i></button>
            </div>      
        </div>
    </body>
</html>

null


共1个答案

匿名用户

这个解决方案是可行的。如果UI对齐有什么问题,让我知道。

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <style>
        .item-text-area {
            width: 100%;
            height: 50px;
        }
        .align-right {
            text-align: right;
        }
    </style>
    <body>
        <div id="main_section" class="container">
            <div> 
                <div>
                    <textarea class="item-text-area" name=""></textarea> 
                </div>
                <div class="align-right">
                    <span>LEFT RIGHT</span>                 
                    <div>
                        <button><i class="fa fa-minus"></i></button>
                        <button><i class="fa fa-plus"></i></button>
                    </div>
                </div>          
            </div>
            <div class="align-right">
                <button><i class="fa fa-road"></i></button>
            </div>      
        </div>
    </body>
</html>