如何在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>