html - "display: table-cell" has no constistent alignment -


once between div tags, html tag (eg headings, breaks), contents no longer align same. example: html.displayfor (...) should end justified. how can fixed?

<div class="table">     <div class="row">         <div class="cell">             <h3>heading 1</h3>             <hr />             <div class="row">                 <div class="cell">label 1</div>                 <div class="cell">html.displayfor(...)</div>             </div>             <div class="row">                 <div class="cell">label 2 more text</div>                 <div class="cell">html.displayfor(...)</div>             </div>             <br />             <h3>heading 2</h3>             <hr />             <div class="row">                 <div class="cell">label 3 text</div>                 <div class="cell">html.textboxfor(...)</div>             </div>                    </div>         <div class="cell">             ...         </div>     </div> </div> 

css:

div .table {     display: table;     width: 100%; }  div .cell {     display: table-cell;     padding: 0.3em; }  div .row {     display: table-row; } 

it should more (red line):

current , desired (in red)

its because break flow of layout not adhering using table->row/cell structure injecting div , hr elements in middle of it.

you add width first column:

.row .cell .row .cell:first-child{     width:200px; } 

demo fiddle


Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -