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):
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; }
Comments
Post a Comment