添加相邻元素时调整/更改 HTML 元素的宽度答案

【问题标题】：Resize/Change HTML element's width when adjacent element added添加相邻元素时调整/更改 HTML 元素的宽度
【发布时间】：2020-03-06 09:47:00
【问题描述】：

我的目标是让 HTML 元素自动调整大小。

这是我的脚本。

<html>
    <head>
        <style>
            .main{
                background-color: blue;
                width: 500px;
                position: fixed;
            }
            .inner{
                background-color: brown;
            }
            #tag{
                display: inline;
                background-color: aqua;
            }
            input{
                float: right;
                width: auto;
                height: 100%;
            }
            button{
                margin-top: 30px;
            }
        </style>
    </head>
    <div class="main">
        <div class = "inner">
            <div id="tag">

            </div>
            <input type='text'>
        </div> 
    </div>
    <button onclick="add()">Add</button>
    <script>
        function add(){
            let text = document.getElementById("tag").innerHTML;
            document.getElementById("tag").innerHTML = text+"<span>hi</span>";
        }
    </script>
</html>

Jsfiddle：https://jsfiddle.net/j0xmkgd8/

问题是我无法自动调整宽度

预期输出

最初，输入元素应该是全宽（500px）。
当我点击添加时，输入元素的宽度必须根据父宽度（500px）调整大小并且没有元素溢出
假设如果我单击一次添加按钮，Hi 文本在class="inner" 元素内上升，输入元素的宽度应根据inner 类宽度（即）50px（内部类元素）+ 450px（输入element) = 500px（主类元素）
- 每当inner 类宽度增加时，input 元素的宽度也会减小。

【问题讨论】：

标签： javascript html css

【解决方案1】：

我已经为你的小提琴创建了一个分支，添加了更多 ID：https://jsfiddle.net/c4yhv7zk/

<div class="main" id="main">
    <div class = "inner">
        <div id="tag">

        </div>
        <input id="input" type='text'>
    </div> 
</div>

这样在添加文本时，它会获取主div和标签div的外部宽度，减去它们，然后将它们分配给输入元素。我添加了一个 5px 的边距以避免溢出，它会隐藏减去小于 0 的输入元素。

var tagWidth = document.getElementById("tag").offsetWidth;
var mainWidth = document.getElementById("main").offsetWidth ;
var finalWidth = mainWidth - tagWidth - 5;
if ( finalWidth > 0 ) {
    document.getElementById("input").style.width = finalWidth + "px"; 
} else {
    document.getElementById("input").style.display = "none"; 
}

并添加“box-sizing:border-box”以避免浏览器之间的问题：

.main{
  background-color: blue;
  width: 500px;
  position: fixed;
  box-sizing: border-box;
}
.inner{
  background-color: brown;
  width: 100%;
  box-sizing: border-box;
}
#tag{
  display: inline;
  background-color: aqua;
  box-sizing: border-box;
}
input{
  height: 100%;
  box-sizing: border-box;
}

为避免减去这 5px，您可以分别在 #tag 和 #input 元素中添加“float:left”和“float:right”。我没有在这个小提琴中这样做，因为我不知道#tag 元素上的“显示：内联”对您项目的其余部分有多重要。

【讨论】：

【解决方案2】：

检查 sn-p。如果您有任何疑问，请告诉我。

 .main{
                background-color: blue;
                min-width: 500px;
                position: fixed;
                width:auto;
            }
            .inner{
                background-color: brown;box-sizing
            }
            #tag{
                display: inline;
                background-color: aqua;
            }
            input{
                width: auto;
                height: 100%;
            }
            button{
                margin-top: 30px;
            }

<html>
    <head>
    </head>
    <div class="main">
        <div class = "inner">
            <div id="tag">

            </div>
            <input type='text'>
        </div> 
    </div>
    <button onclick="add()">Add</button>
    <script>
        function add(){
            let text = document.getElementById("tag").innerHTML;
            document.getElementById("tag").innerHTML = text+"<span>hi</span>";
        }
    </script>
</html>

【讨论】：

【解决方案3】：

Flexbox 非常适合自动调整元素的大小。您可以用元素填充容器的剩余空间，并在向容器中添加新的<span> 时调整输入的大小。

function add() {
  document.getElementById("tag").insertAdjacentHTML('beforeend', '<span>hi</span>');
}

*, *::before, *::after {
  box-sizing: border-box;
}

.main {
  background-color: blue;
  width: 500px;
}

.inner {
  display: flex;
  background-color: brown;
}

#tag {
  flex: 0;
  background-color: aqua;
}

input {
  flex: 1 1 auto;
  height: 100%;
}

button {
  margin-top: 30px;
}

<div class="main">
  <div class="inner">
    <div id="tag">

    </div>
    <input type='text'>
  </div>
</div>
<button onclick="add()">Add</button>

【讨论】：