Вирівнювання по нижній межі

1. Як це виглядає в браузері

Для перегляду цього прикладу необхідний IE.

Для більшості сучасних браузерів це не проблема. Бажаного результату можна досягти за допомогою CSS-властивостей display (значення table, table-row, table-cell) і vertical-align (зі значенням bottom). Але в Internet Explorer, навіть з появою сьомої версії, цих значень немає.

Пропоноване нижче рішення працює в IE версії 5 і вище. І не залежить від режиму рендеринга - quirks, transitional або strict.

Як це виглядає в браузері

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 <style type = "text / css"> .columns3 {display: table; position: relative; // overflow-y: hidden; width: 100%; } .Columns3 .r {display: table-row; position: relative; // top: 100%; width: 100%; } .Columns3 .a, .columns3 .b, .columns3 .c {display: table-cell; // display: inline; position: relative; // float: left; width: 33%; // margin-right: -100%; vertical-align: bottom; } .Columns3 .b {width: 34%; // margin-left: 33%; } .Columns3 .c {// margin-left: 67%; } .Columns3 .r .r {display: block; // top: -100%; width: auto; // width: 100%; padding: 0 1em; } .Columns3 .a .r {padding-left: 0; } .Columns3 .c .r {padding-right: 0; } </ Style> <div class = "columns3"> <div class = "r"> <div class = "a"> <div class = "r"> 0 <br /> 1 <br /> 2 <br /> 3 <br /> 4 <br /> 5 </ div> </ div> <div class = "b"> <div class = "r"> 0 <br /> 1 <br /> 2 <br /> 3 <br /> 4 <br /> 5 <br /> 6 <br /> 7 <br /> 8 <br /> 9 </ div> </ div> <div class = "c"> < div class = "r"> 0 <br /> 1 <br /> 2 <br /> 3 </ div> </ div> </ div> </ div>