如何使div可調整大小

你好，stackoverflow社區我需要幫助我的腳本。我正在使用NicEditor，並且正在嘗試使其像文本區域一樣可調整大小。但是當我製作div：resize:both時，可以調整高度，但不能調整寬度。下面是腳本：如何使div可調整大小

<div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; overflow-y: auto; overflow-x: hidden;"> 
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true"> 
<br> 
</div> 
</div>

我能做些什麼，使這個編輯器調整大小，如文本區域？這裏是jsfidle：https://jsfiddle.net/JVhpJ/11/

來源

2015-08-28 McLaren

我可以調整你的JS提琴左右逢源，鉻MAC –

我所做的第一件事就是要創建一個div名爲editorcontainer並插入您在HTML中NicEditor的容器中使用的值。

通過添加width:auto並添加display:inline-block並刪除所有溢出值，div現在將適應孩子的寬度和高度。

下面的例子：

<script src="js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script> 
 
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

.nicEdit-main { 
 
    resize:both; 
 
    border:1px solid grey; 
 
} 
 

 
.editorcontainer{ 
 
\t width:auto; 
 
\t border-width: 0px 1px 1px; 
 
\t border-style: none solid solid; 
 
\t border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); 
 
\t -moz-border-top-colors: none; 
 
\t -moz-border-right-colors: none; 
 
\t -moz-border-bottom-colors: none; 
 
\t -moz-border-left-colors: none; 
 
\t border-image: none; 
 
     display:inline-block; 
 
    
 
}

<div class="editorcontainer"> 
 
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true"> 
 
<br> 
 
</div> 
 
</div>

而且在下面找到您的修改小提琴：

https://jsfiddle.net/JVhpJ/13/

來源

2015-08-28 11:47:20

-1

嗯，也許這樣（主要的div風格：溢出：汽車;調整大小：兩者）？

<div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; resize: both; 
    overflow: auto;"> 
    <p>vw v wev wv vw ev</p> 
</div>

來源

2015-08-28 11:33:10

你試過了嗎？請在發佈答案之前試用您的解決方案 –

是的，我嘗試過：https：//jsfiddle.net/a49fga7d/ –

這不是他要求的... –

它的律位hackish的，但是這是我做的事：

bkLib.onDomLoaded(function() { 
    nicEditors.allTextAreas(); 
    $("#container").children().css("width", "100%"); 
    $("#container").resizable(); 
    $("#textarea1").prev().css("height", "70%"); 
}); 

.nicEdit-main { 
    height:90%; 
    width:98% !important; 
} 
textarea { 
    width:100%; 
} 
#container { 
    overflow:hidden; 
}

Here is the JSFiddle demo

來源

2015-08-28 12:37:37

如何使div可調整大小

回答

相關問題