html - 输入文本时打开 contenteditable 的 div 跳转

Question

我遇到了一些将 contenteditable 设置为 true 的 div 的问题。每当我将文本添加到 div 中时，它们都会跳转到一个新位置。只有当所有 div 为空或全部填充文本时，它们才具有相同的相对位置。

你可以用代码找到一个 JSfiddle here .

我做错了什么？

代码如下:

.editor_table {
  position: relative;
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.editor_row {
  display: table-row;
}
.editor_cell {
  display: table-cell;
  border: none;
  border-spacing: 5px;
  width: 22%;
  padding: 0px;
}
.editor_onvoldoende {
  background: #F00
}
.editor_voldoende {
  background: #FF0;
}
.editor_goed {
  background: #0F0;
}
.editor_uitstekend {
  background: #1B1;
}
.editor_onvoldoendead {
  background: #F00
}
.editor_voldoendead {
  background: #FF0;
}
.editor_goedad {
  background: #0F0;
}
.editor_uitstekendad {
  background: #1B1;
}
.editor_subject {
  position: relative;
  display: table-cell;
  border: none;
  width: 100px;
  padding: 10px;
  vertical-align: middle;
}
.editor_subject_input {
  position: relative;
  width: 100%;
  border: none;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.editor_inner_cell {
  margin: 5px;
  height: 90px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.editor_textarea {
  position: relative;
  height: 100%;
  width: 100%;
  border: none;
}

<div class="editor_table">
  <div id="editor_a1" class="editor_row">
    <div class="editor_subject">
      <h3>
                        <input type="text" name="editor_subject1" class="editor_subject_input">
                        </h3>
    </div>
    <div id="editor_io" class="editor_cell">
      <div id="editor_io_content" class="editor_onvoldoendead editor_inner_cell" contenteditable="true">
      </div>
    </div>
    <div id="editor_iv" class="editor_cell">
      <div id="editor_iv_content" class="editor_voldoendead editor_inner_cell" contenteditable="true">
      </div>
    </div>
    <div id="editor_ig" class="editor_cell">
      <div id="editor_ig_content" class="editor_goedad editor_inner_cell" contenteditable="true">
      </div>
    </div>
    <div id="editor_iu" class="editor_cell">
      <div id="editor_iu_content" class="editor_uitstekendad editor_inner_cell" contenteditable="true">
      </div>
    </div>
  </div>
</div>

Answer 1

将您的 css 类替换为以下内容:我添加了“float:left”并增加了宽度。

.editor_cell {
display: table-cell;
border: none;
border-spacing: 5px;
width: 24%;
padding: 0px;
float: left;