如何使div可调整大小

debugcn 发表于 Dev

迈凯轮

您好stackoverflow社区我的脚本需要帮助。我正在使用NicEditor，并且试图使其像文本区域一样可调整大小。但是当我制作div时：resize:both可以调整其高度，但不能调整宽度。这是脚本：

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

皮埃尔·伊朗尼

我首先要做的是创建一个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{
	width:auto;
	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;
        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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。