我的html中有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
这个解决方案是可行的。如果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>