Question

我遇到了一些问题，其中包含一些具有满足感的设定为真的div。每当我在div中添加文本时，它们都会跳转到一个新位置。只有当所有div都为空或者所有div都填充了文本时，它们才具有相同的相对位置。

您可以找到代码为here的JSfiddle。

我做错了什么？

以下是代码：

.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;

}

Answer 2

/* ------------------ */
/* CSS for the editor */
/* ------------------ */

.editor_table {
    position: relative;
    display: flex;
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.editor_row {
    display: flex;
}

.editor_cell {
    border: none;
    border-spacing: 5px;
    width: 22%;
    padding: 0px;
    width: 90px;
}

.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;
    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: 4px;
    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>

如果您能够进行切换，我强烈建议display: flex来解决此问题。

输入文本时，div与contenteditable开启跳转

2 个答案: