div с включенными контентом включенными переходами при вводе текста

Question

Я наткнулся на проблему с некоторыми div, которые имеют contenteditable установленный в true. Всякий раз, когда я добавляю текст в div, они переходят на новую позицию. Только когда все divs пусты или все заполнены текстом, они имеют одинаковую относительную позицию.

Вы можете найти 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; 

}

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 решить эту проблему.