元素离开DIV

时间：2017-12-28 22:33:16

标签： html css

我变得非常生气，因为我无法弄清楚造型的问题在哪里。我的btnBox div一直在noteBoxes div之外，我已经乱了一个多小时但仍然无法解决问题，不要担心js，抱歉那个。我只需要帮助将btnBox div放在noteBoxes div内并放在textarea的右边。任何帮助表示赞赏。 

/* 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>

2 个答案:

答案 0 :(得分：1)

您似乎在音符框上设置了默认高度，因此当按钮框呈现时，它会渲染超出默认高度。如果删除默认高度，则音符框将拉伸以包含按钮框。那是你在找什么？

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>

答案 1 :(得分：0)

我不确定你究竟在找什么，但我想你想要一个文本区域和文本区域右侧的那两个按钮。检查以下更改 - ＆gt;

＆＃13;
＆＃13; 
/* 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;
  float:right;
}


/* 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;
}

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

.notesScroll{
  width: 510px; 
  background-color: #606060; 
  margin: 0 auto;
  height: 100px;
  }
}
＆＃13; 
<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" >
      <div id="notesBox" class= noteBoxes>
        <div class="btnBox" >  
          <button class="saveNote"></button>
          <button class="removeNote" style="margin-top: -4px; margin-left: 0;">        </button>  
        </div> 
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题