DIV不隨內容擴展-使用的方法（最小高度，溢出：隱藏，清除div ..無作用：-(）

Question

很抱歉，如果我要問一個多余的問題，但是我嘗試使用此網站中提供的幾乎所有選項，而作為一個初學者，可能是我正在努力利用它們來發揮作用，這是我為我的代碼創建的小提琴（添加了一些內容）答案），我只是想將“添加答案（可選）”放入“選項卡內容” div中，但它似乎不會隨着內容而擴展，並且“添加答案”標簽已超調。 有人可以建議出什么問題嗎？ 這將是很大的幫助...

http://jsfiddle.net/83PTq/2/

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>

CSS文件

body {
    margin-top: 100px;
    font-family:'Trebuchet MS', serif;
    line-height: 1.0
    height: 100%;
}
.container {
    width:800px;
    margin: 0 auto;
    overflow: auto;
    min-height:100%;
}
ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.tabs li {
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.tabs li.current {
    background: #DFF5B0;
    color: #222;
}
.tab-content {
    display: none;
    padding: 15px;
}
.clear {
    width:100%;
    float:none;
    clear:both;
}
.tab-content.current {
    display: inline-block;
    background: #DFF5B0;
    overflow:auto;
    min-height:1%;
}
.question_textarea {
    background: white;
    border: 1px #ddd solid;
    width: 600px;
    height: 100px;
    font: 9pt Consolas;
    overflow: hidden;
}
form.answer_options {
    width:754px;
    margin: 20px auto 0px auto;
    background-color:#DFF5B0;
    padding:5px;
}
.answer_options .form label {
    float: left;
    text-align: left;
    margin-right: 5px;
    margin-top:2px;
    width:auto;
}
.answer_options .form input {
    width:100px;
}
.answer_options label {
    color:#444;
    width:48px;
    float: left;
    text-align: right;
    margin-right: 6px;
    margin-top:2px;
}
form.answer_options label.optional {
    float: left;
    text-align: right;
    margin-right: 6px;
    margin-top:2px;
    color: #A3A3A3;
}
form.answer_options label.obinfo {
    float:right;
    padding:3px;
    font-style:italic;
}
form.answer_options input {
    width: 140px;
    color: #000;
    float: left;
    margin-right: 5px;
}
form.answer_options input.long {
    width: 247px;
    color: #505050;
}
form.answer_options input.short {
    width: 40px;
    color: #505050;
}
form.answer_options input[type=radio] {
    float:left;
    width:15px;
}
form.answer_options label.gender {
    margin-top:-1px;
    margin-bottom:2px;
    width:34px;
    float:left;
    text-align:left;
    line-height:19px;
}
form.answer_options input[type=text] {
    border: 1px solid #E1E1E1;
    height: 18px;
}
form.answer_options input[type=password] {
    height: 18px;
}
form.answer_options input[type=button] {
    background:#9b1515;
    border: 1px #ddd solid;
}
form.answer_options input[type=button]:hover {
    cursor:pointer;
    background:#d85353;
}
form.answer_options .submit {
    color: #fff;
    cursor: pointer;
    float:left;
    margin:10px;
    padding:5px;
    background: #9b1515;
    background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0, rgba(255, 255, 255, 0.1) 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.1)), color-stop(1, rgba(255, 255, 255, 0.1)));
}
form.answer_options .submit:hover {
    background:#505050;
}
form.answer_options .submit:active {
    background:#ccc;
    color: #000;
}
form.answer_options input[type=text].small {
    height: 18px;
    width:30px;
}
form.answer_options input[type=checkbox] {
    width:14px;
    margin-top:4px;
}
form.answer_options select {
    border: 1px solid #E1E1E1;
    float:left;
    margin-bottom:3px;
    color: #505050;
    margin-right:5px;
}
.post_query {
    height: 39px;
    left: 760px;
    position: absolute;
    top: 274px;
    width: 40px;
    z-index: 3;
}
.answers_textboxes {
    height: 39px;
    left: 500px;
    position: absolute;
    top: 288px;
    width: 144px;
    z-index: 3;
}
.add_answer_label {
    height: 39px;
    left: 335px;
    position: absolute;
    top: 293px;
    width: 163px;
    z-index: 3;
}
.add_answer_image {
    position: absolute;
    top: 289px;
}
.polls_tab {
    background:#DFF5B0;
}

提前致謝

Answer 1

歡迎來到HTML和CSS的有趣世界。

正如jmore在他的回答中指出的那樣，您面臨的問題歸因於position:absolute ，這導致元素從DOM流中移出。 如果您還沒有機會，請查看這篇MDN文章，其中介紹了職位的運作方式。 正如您可能從我們的評論中看到的那樣，理解是一個重要的概念:)

MDN文章： https : //developer.mozilla.org/en-US/docs/Web/CSS/position

您想要完成的工作可以通過幾種方法來完成（如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后，您只需要將該元素float 。

這是一個小提琴演示： http : //jsfiddle.net/83PTq/4/

我想花時間指出其他一些對您繼續學習有所幫助的事項。

• 您應該避免使用表格進行布局。 表是用於表格數據的，因此使用它來包裝您的輸入是不好的做法。
• Web設計的一個概念稱為“響應式設計”。 盡管我不會過多地進行響應式設計（這超出了此問題的范圍），但有一個想法是您的頁面應可在所有設備上使用。 通過對widths （例如，文本區域）進行硬編碼，可以約束元素。 您可以使用媒體查詢來更改寬度，但是讓parent來照顧它要容易得多。

希望這個答案是有幫助的。

Answer 2

這是因為您使用的是absolute定位，從而使元素脫離了文檔流。 放置東西是不好的做法，應該是最后的結果。 擺脫它，並使用諸如float或display: inline-block

JSFIDDLE

.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; 
}