html - 元素走出 DIV

Question

我感到非常恼火，因为我无法弄清楚样式的问题出在哪里。我的btnBox div一直跑到noteBoxes div之外，我折腾了一个多小时还是没解决问题，js不用担心，对不起。我只需要帮助将 btnBox div 放在 noteBoxes div 中并放在文本区域的右侧。任何帮助表示赞赏。

/* textarea styling for notes */

.notesE {
  width: 478px;
  max-width: 478px;
  height: 100px;
  margin: 0 auto;
  margin-left: 0;
  border: none;
  padding: 5px;
  overflow: hidden;
  resize: none;
  clear: both;
}

.btnBox {
  height: 100px;
  border: none;
  width: 11px;
  clear: both;
  top: 0px;
}


/* remove note button */

.removeNote {
  width: 10px;
  height: 50px;
  margin-left: 0;
  margin-right: 0;
  background-color: #fc7979;
  border: none;
  cursor: pointer;
  margin-top: -4px;
  margin-left: 0;
  clear: both;
}

.saveNote {
  width: 10px;
  height: 50px;
  margin-left: 0;
  margin-right: 0;
  background-color: #46e68b;
  border: none;
  cursor: pointer;
  clear: both;
}


/* div that holds note and button and date */

.noteBoxes {
  width: 510px;
  height: 128px;
  margin-bottom: 15px;
}

.dateTxt {
  margin-bottom: 0;
  margin-top: 0;
  color: #ccc;
}

<div id="custNotes" style="width: 550px; margin: 0 auto;">
  <h3>
    <!-- Customer Value-->Notes</h3>
  <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>


  <p id="Message"></p>
  <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;">
    <div id="notesBox" style="padding: 10px; width: 510px;">
      <!-- <div class="btnBox" style="width: 10px; height: 100px;">
        <button class="saveNote"></button>
        <button class="removeNote" style="margin-top: -4px; margin-left: 0;"></button>
      </div> -->
    </div>
  </div>
</div>

Answer 1

您似乎在笔记框上设置了默认高度，因此当按钮框呈现时，它会呈现超出默认高度的高度。如果您删除默认高度，则注释框将拉伸(stretch)以包含按钮框。这就是您要找的吗？

var noteCount = 0;

function addNote(style) {

  const notesBox = document.getElementById('notesBox');
  var noteBoxes = document.createElement('div');
  textarea = document.createElement('textarea'),
    btnBox = document.createElement('div'),
    save = document.createElement('button'),
    remove = document.createElement('button'),
    today = new Date();

  var txtElement = document.createElement('p');
  var dateString = '' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes();
  txtElement.innerHTML = dateString;
  txtElement.setAttribute('class', style);
  txtElement.className = 'dateTxt';
  txtElement.setAttribute('id', style);
  txtElement.id = 'note ' + noteCount + ' date';
  txtElement.setAttribute('data-month', today.getMonth() + 1);
  txtElement.setAttribute('data-year', today.getFullYear());
  // div that holds each note and remove button and date
  notesBox.appendChild(noteBoxes);
  noteBoxes.setAttribute('class', style);
  noteBoxes.className = 'noteBoxes';
  noteBoxes.setAttribute('id', style);
  noteBoxes.id = 'note box ' + noteCount;
  noteBoxes.appendChild(txtElement);
  noteBoxes.appendChild(textarea);
  noteBoxes.appendChild(btnBox);

  // note that is added
  textarea.setAttribute('class', style);
  textarea.className = 'notesE';
  textarea.setAttribute('id', style);
  textarea.id = 'note' + noteCount;

  // button box
  btnBox.setAttribute('class', style);
  btnBox.className = 'btnBox';
  btnBox.setAttribute('id', style);
  btnBox.id = 'btnBox' + noteCount;
  btnBox.appendChild(save);
  btnBox.appendChild(remove);

  // save button
  save.setAttribute('title', style);
  save.title = 'save';
  save.setAttribute('class', style);
  save.className = 'saveNote';
  save.setAttribute('id', style);
  save.id = '+Note' + noteCount;

  // button to remove note
  remove.setAttribute('title', style);
  remove.title = 'delete';
  remove.setAttribute('class', style);
  remove.className = 'removeNote';
  remove.setAttribute('id', style);
  remove.id = '-Note' + noteCount;
  remove.onclick = function() {
    // confirm alert dialog
    // deletes the note if user selects 'OK'
    if (confirm("Are you sure you want to delete this note?") == true) {
      // removes the noteBoxes div of which the button clicked is in.
      this.parentElement.remove();
    }
  }
  noteCount++;
  console.log(textarea.id);


  var month = document.getElementById('selectMonth');
  var year = document.getElementById('selectYear');
  var searchDate = document.getElementById('searchDate');




}

/* textarea styling for notes */

.notesE {
  width: 478px;
  max-width: 478px;
  height: 100px;
  margin: 0 auto;
  margin-left: 0;
  border: none;
  padding: 5px;
  overflow: hidden;
  resize: none;
  clear: both;
}

.btnBox {
  height: 100px;
  border: none;
  width: 11px;
  clear: both;
  top: 0px;
}


/* remove note button */

.removeNote {
  width: 10px;
  height: 50px;
  margin-left: 0;
  margin-right: 0;
  background-color: #fc7979;
  border: none;
  cursor: pointer;
  margin-top: -4px;
  margin-left: 0;
  clear: both;
}

.saveNote {
  width: 10px;
  height: 50px;
  margin-left: 0;
  margin-right: 0;
  background-color: #46e68b;
  border: none;
  cursor: pointer;
  clear: both;
}


/* div that holds note and button and date */

.noteBoxes {
  width: 510px;
  margin-bottom: 15px;
}

.dateTxt {
  margin-bottom: 0;
  margin-top: 0;
  color: #ccc;
}

<div id="custNotes" style="width: 550px; margin: 0 auto;">
  <h3>
    <!-- Customer Value-->Notes</h3>
  <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>


  <p id="Message"></p>
  <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;">
    <div id="notesBox" style="padding: 10px; width: 510px;">
      <!-- <div class="btnBox" style="width: 10px; height: 100px;">
        <button class="saveNote"></button>
        <button class="removeNote" style="margin-top: -4px; margin-left: 0;"></button>
      </div> -->
    </div>
  </div>
</div>