如何在div中放置div？

Question

我正在尝试将div放置在另一个div的右上角：

https://plnkr.co/edit/zhZdWf4KJZU02XF8zAjG?p=preview

但是我需要在样式“ textAreaStyle”中将div的大小显式设置为宽度600px以便放置它：

是否可以在不显式设置width的情况下将“全选”对齐到div的上角？

 function selectAll(element) { var doc = document , text = doc.getElementById(element) , range, selection ; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } } document.onclick = function(e) { if (e.target.className === 'click') { SelectText('selectme'); } }; 

 .topcorner{ position:absolute; top:0; right:0; border-style: solid; border-width:1px; border-color:lightgray; } .textAreaStyle { width: 600px; height: 150px; border-style: solid; border-width:1px; border-color:lightgray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <br></br><br></br><br></br> <div style="position:relative;"> <div onclick="selectAll('preview')" class="topcorner">Select All</div> <div class="textAreaStyle" contenteditable id="preview"> test text </div> </div> 

Answer 1

无需将类添加到contenteditable div中，而是将类添加到其父级。 这会将width和height应用于容器元素，容器内部的元素将继承这些属性，因此是相对于contenteditable div设置的。

更新的柱塞

 function selectAll(element) { var doc = document, text = doc.getElementById(element), range, selection; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } } document.onclick = function(e) { if (e.target.className === 'click') { SelectText('selectme'); } }; 

 /* Styles go here */ .topcorner { position: absolute; top: 0; right: 0; border-style: solid; border-width: 1px; border-color: lightgray; } .textAreaStyle { width: 400px; height: 150px; border-style: solid; border-width: 1px; border-color: lightgray; } 

 <div class="textAreaStyle" style="position:relative;"> <div onclick="selectAll('preview')" class="topcorner">Select All</div> <div contenteditable id="preview"> test text </div> </div> 

---

正如I Stanley所建议的那样， float: right也可以用来代替放置元素并在其上应用零的top和right 。 这也将防止文本落后于“全选” div。

 function selectAll(element) { var doc = document, text = doc.getElementById(element), range, selection; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } } document.onclick = function(e) { if (e.target.className === 'click') { SelectText('selectme'); } }; 

 /* Styles go here */ .topcorner { float: right; border-style: solid; border-width: 1px; border-color: lightgray; } .textAreaStyle { width: 400px; height: 150px; border-style: solid; border-width: 1px; border-color: lightgray; } 

 <div class="textAreaStyle" style="position:relative;"> <div onclick="selectAll('preview')" class="topcorner">Select All</div> <div contenteditable id="preview"> test text </div> </div> 

Answer 2

只要这样做：

<div class="textAreaStyle" contenteditable id="preview">
  <div onclick="selectAll('preview')" class="topcorner">Select All</div>
  test text
</div>

然后在您的CSS中：

 .topcorner{
   position:absolute;
   top:0;
   right:0;
   border-style: solid;
   border-width:1px;
   border-color:lightgray;
  }

.textAreaStyle {
  width: 600px;
  height: 150px;
  border-style: solid;
  border-width:1px;
  border-color:lightgray;
  position:relative; /* Added */
}

Answer 3

稍微更改标记和CSS：

.topcorner{
   position:absolute;
   top:0;
   right:-1px;
   border-style: solid;
   border-width:1px;
   border-color:lightgray;
  }

  .textAreaStyle {
    width: 50%;
    height: 150px;
    border-style: solid;
    border-width:1px;
    border-color:lightgray;
    position: relative;
  }

标记

<div class="textAreaStyle" contenteditable id="preview">
        <div onclick="selectAll('preview')" class="topcorner">Select All</div>
        test text
</div>

因此，您将父级设置为position：相对，宽度设置为fx。 50％。 然后将新重新排列的全选按钮设置为位置：绝对（并由于边框将其移动-1px）。

Answer 4

既然您已经提到过，那么您希望将“全选”放置在文本区域的右上角。 可以通过执行以下操作来实现

• 删除div.topcorner位置样式
• 将“全选” div移动到div.textAreaStyle 。
• 将div.topcorner浮动到右侧

 .topcorner { float: right; top: 0; right: 0; border-style: solid; border-width: 1px; border-color: lightgray; } .textAreaStyle { width: 600px; height: 150px; border-style: solid; border-width: 1px; border-color: lightgray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <br></br> <br></br> <br></br> <div style="position:relative;"> <div class="textAreaStyle" contenteditable id="preview"> <div onclick="selectAll('preview')" class="topcorner">Select All</div> test text </div> </div>