Javascript 未使用内容使用的方法扩展DIV（最小高度、溢出：隐藏、清除DIV..none worked:-（）

如果我问了一个多余的问题，我很抱歉，但我尝试使用了本网站提供的几乎所有选项，作为一名初学者，我可能很难充分利用它们，这是我为代码创建的小提琴（添加了几个答案），我只是试图将“添加答案（可选）”加入“选项卡内容”div，但它似乎并没有随着内容而扩展，“添加答案”的标签已经过了头。有人能告诉我哪里出了问题吗？这将是很大的帮助

HTML代码：

<div class="container">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Polls</li>
        <li class="tab-link" data-tab="tab-2">tab2</li>
    </ul>
    <!-- Content for each tab is decided -->
    <div id="tab-1" class="tab-content current">
        <!-- To add answer options -->
        <form action="ask_question" class="answer_options" method="POST">
            <textarea name="question" class="question_textarea" type="text" placeholder="Your query, please ?"></textarea>
            <div class="add_answer_label">Add Answers(optional)</div>
            <div class="answers_textboxes">
                <table id="dataTable">
                    <tr>
                        <td>
                            <input type="text" required="required" name="BX_NAME[]">
                        </td>
                    </tr>
                </table>
                <div class="clear"></div>
            </div>
        </form>
    </div>
    <div id="tab-2" class="tab-content">Tada</div>
</div>

---

提前感谢

这是因为您使用的是

绝对

定位，它将元素从文档流中分离出来。定位东西是一种不好的做法，应该是最后的结果。摆脱它，然后使用类似

浮动

或

显示：内联块

---

欢迎来到HTML和CSS的有趣世界

正如jmore在他的回答中指出的，您面临的问题是由于

position:absolute

导致元素从DOM流中删除。如果您还没有机会，请看这篇解释position如何工作的MDN文章。正如您可能从我们的评论中看到的，这是一个需要理解的重要概念：）

MDN文章：

您试图完成的工作可以通过几种方式完成（正如jmore指出的），但最简单的方式是包装元素，然后将包装器向右浮动。使用您的标记，您将看到我将两个div包装在一个容器div中，

additionalAnswersWrapper

<div class="additionalAnswersWrapper">
    <div class="add_answer_label">Add Answers(optional)</div>
    <div class="answers_textboxes">
        <table id="dataTable">
            <tr>
                <td>
                    <input type="text" required="required" name="BX_NAME[]">
                </td>
            </tr>
        </table>
        <div class="clear"></div>
    </div>
</div>

添加答案（可选）

包装好div后，只需将该元素

浮起即可

这里有一把小提琴在演示：

我想花点时间指出一些其他的东西，在你继续学习的过程中会对你有所帮助


您应该避免使用表格进行布局。表格用于表格数据，因此使用它包装输入是不好的做法
有一个网页设计的概念叫做“响应式设计”。虽然我不会过多地讨论响应性设计（这超出了这个问题的范围），但有一个想法是，您的页面应该跨所有设备工作。通过硬编码
宽度
（例如，textarea），可以约束元素。您可以使用媒体查询来更改宽度，但是让
父级处理这个问题要容易得多


希望这个答案是有帮助的。
我很好奇-为什么你说定位是不好的做法？如果您了解定位的概念及其工作原理，那么定位功能非常强大。除了它是惰性的这一事实之外，它还可能会产生更多需要解决的问题（请看下面的示例，这是一个非常简单且绝对的定位，导致元素无法通过父元素的高度识别）。有时候它是需要的，这很好，但大多数时候不是。如果有任何改变，或者元素被添加，你必须返回并重新调整你的所有位置。只是澄清一下——错误地使用定位是懒惰的。此外，如果使用不当或开发人员不完全理解规范，它会产生更多的问题。再说一次，当你理解它是如何工作的时候，定位没有什么错。老实说，我不确定你从哪里得到这种“定位不好”的立场。我同意Jack的观点——似乎经常使用浮点数和内联块是过度工程化的。它们都不符合页面的自然流程，如果使用过于随意，则会引入各自的问题（例如：内联块添加额外的空格/边距）。正确使用时，定位是一个很好的工具，但使用浮动和内联块定位基本元素就像使用剪草机切割一张纸；正确的想法，错误的工具。使用定位可以做到以下几点：元素（父元素/子元素）之间的相对对齐，无需硬编码像素，使用绝对定位可以提高性能（无论是动画、SPA和减少回流），在不影响相邻元素的情况下偏移元素（或者通过位置：相对和上/左）或位置：固定/位置：避免使用JS的粘性都是力量（而且非常常见）的东西，一点也不“懒惰”。是的，这篇文章确实很有用，事实上，我们尝试了更深入地使用“浮动”和“位置”以一种合适的方式，计算出你用小提琴做的事情，谢谢：-）。此外，我已经删除了用于此目的的表用法，现在改为使用DIVs，很抱歉响应延迟。。
.answers_textboxes {
  height: 39px;
  width: 144px;
  z-index: 3;
  display: inline-block;
  vertical-align: top;
  margin: 5px 0 0 0;
}

.add_answer_label {
  height: 39px;
  width: 163px;
  z-index: 3;
  display: inline-block;
  vertical-align: top;
  margin: 5px 0 0 0; 
}

<div class="additionalAnswersWrapper">
    <div class="add_answer_label">Add Answers(optional)</div>
    <div class="answers_textboxes">
        <table id="dataTable">
            <tr>
                <td>
                    <input type="text" required="required" name="BX_NAME[]">
                </td>
            </tr>
        </table>
        <div class="clear"></div>
    </div>
</div>