我怎样才能让按钮向右移动，修复中间部分并使所有内容都可以调整大小

Question

I have a 3 sections in my html我的 html 中有 3 个部分

textarea文本区
lable and below 2 buttons标签和以下 2 个按钮
road button道路按钮

How can I make everything resizible and have seconds section fixed so it doesn't resize (label and below 2 buttons) and have 3 button Road go on the right and doesn't move, it should be fixed.我怎样才能让所有东西都可以调整大小并固定秒部分，这样它就不会调整大小（标签和下面的 2 个按钮）并且有 3 个按钮 Road 在右边并且不会移动，它应该被修复。

So in the nutshell, textarea should be resizible and seconds section and button the right should be fixed.所以简而言之，textarea 应该是可调整大小的，并且秒部分和按钮应该是固定的。

 <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>

Answer 1

This solution would work.这个解决方案会起作用。 Let me know if there is anything wrong in UI alignment.如果 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>
        .solution {
            display: flex;
            align-items: center;
        }
        .solution > div {
            padding: 0 10px;
        }
        .solution > div:first-of-type {
            flex-grow: 1;
        }
        textarea {
            width: 100%;
        }
        
    </style>
    <body>
        <div id="main_section" class="container">
            <div class="solution">
                <div>
                    <textarea class="item-text-area" name=""></textarea> 
                </div>
                <div>
                    <span>LEFT RIGHT</span>                 
                    <div>
                        <button><i class="fa fa-minus"></i></button>
                        <button><i class="fa fa-plus"></i></button>
                    </div>
                </div>       
                <div>
                    <button><i class="fa fa-road"></i></button>
                </div>       
            </div>  
        </div>
    </body>
</html>

我怎样才能让按钮向右移动，修复中间部分并使所有内容都可以调整大小

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-10-17 14:56:32

我怎样才能让按钮向右移动，修复中间部分并使所有内容都可以调整大小

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-10-17 14:56:32

解决方案1
2 已采纳 2020-10-17 14:56:32