Question

我有升高div元素高度的问题。要查看该问题，您必须插入新元素＆＃34;合法案例框＆＃34; 。然后，您必须点击右上角 / 左上角div 。您可以输入1个字母，然后将其删除（或者只设置焦点并将其删除） - ＆gt;你可以看到div元素的上升。我不明白为什么会这样。对不起，我的英语不好。谢谢！

我还注意到，如果没有评论innerDiv1.setAttribute("data-text", "Full Name of the Case");

，就会发生这种情况

Safari浏览器中出现此问题。

＆＃13;

[contentEditable=true]:empty:not(:focus):before {
    content:attr(data-text)
}
.boxed {
    margin: 5px;
    border: 2px solid black;
    max-width: calc(100% - 10px);
}

.inline {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 10px);
}
.divTable {
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
}
.divRow {
    display:table-row;
}
.divCell {
    display:table-cell;
    border: 2px solid black;
}

＆＃13;

<script>
    function insert(elem) {
        document.getElementById("mainDiv").focus();
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);

        range.insertNode(elem);
    }

    function legalCaseBox() {
        var innerDiv1 = document.createElement('div');
        innerDiv1.contentEditable = 'true';
        innerDiv1.style.minWidth = '50pt';
        innerDiv1.style.minHeight = '50pt';
        innerDiv1.classList.add('divCell');
       //innerDiv1.setAttribute("data-text", "Full Name of the Case");

        var innerDiv2 = document.createElement('div');
        innerDiv2.contentEditable = 'true';
        innerDiv2.style.minWidth = '50pt';
        innerDiv2.style.minHeight = '50pt';
        innerDiv2.classList.add('divCell');
        innerDiv2.setAttribute("data-text", "Year");

        var firstDiv = document.createElement('div');
        firstDiv.contentEditable = 'false';
        firstDiv.classList.add('divTable');

        var rowDiv = document.createElement('div');
        rowDiv.classList.add('divRow');
        rowDiv.appendChild(innerDiv1);
        rowDiv.appendChild(innerDiv2);

        firstDiv.appendChild(rowDiv);

        var secondDiv = document.createElement('div');
        secondDiv.style.minWidth = '150pt';
        secondDiv.style.minHeight = '80pt';
        secondDiv.contentEditable = 'true';
        secondDiv.classList.add('boxed');
        secondDiv.setAttribute("data-text", "Case summary");

        var div = document.createElement('div');
        div.contentEditable = 'false';
        div.classList.add('inline');
        div.classList.add('boxed');
        div.appendChild(firstDiv);
        div.appendChild(secondDiv);

        insert(div);
    }
</script>
<body id="main" spellcheck="false">
    <button onclick="legalCaseBox()">legalCaseBox</button>
    <div id="mainDiv" contenteditable="true"></div>
</body>

＆＃13;

http://jsfiddle.net/Lfysfz6k/3/

Answer 1

<强>观察第一个div是空的，因此它的高度较小，year div的某个高度大于第一个div，因此当点击第一个div时，它不会被最小化，因为年份div由于文本而具有一些最小高度。当你点击年份div时，第一个div为空并且高度较小，所以在你输入年份div最小化之前。

如果您不想使用上述代码，请尝试将height添加到每个div

当用户点击内容JS时，Div改变高度

1 个答案: