drasute Posted March 22, 2011 Report Share Posted March 22, 2011 (edited) Добрый день.У меня есть таблица, в ячейках которой сидят блоки:(границы таблицы - синим цветом, дивов - чёрным)Только не надо спрашивать, зачем я запихиваю в бедную таблицу блоки.Меня интересуют 2 блока, выделенные красным цветом. Я хочу, чтобы они были выровнены по нижнему краю строки таблицы.То есть, при любом увеличении/уменьшении окна браузера или разрешения экрана вся эта хрень принимала следующий вид:Задача вроде элементарная, но я не силён в CSS и не знаю как её решить.Будьте добры, подскажите. Edited March 22, 2011 by drasute Quote Link to comment Share on other sites More sharing options...
0 drasute Posted March 23, 2011 Author Report Share Posted March 23, 2011 + Quote Link to comment Share on other sites More sharing options...
0 tius Posted March 24, 2011 Report Share Posted March 24, 2011 Например<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css"> html, body { height: 100%; } table { width: 50%; margin: 0 auto; height: 50%; border: 1px solid #000 colapsed; } td { border: 1px solid #000; vertical-align: top; height: 100%; } div { background: #c0c0c0; margin: 0 0 5px; } .wraper { height: 100%; min-height: 100%; width: 100%; display: table; background: none; margin: 0; } .td1, .td2 { background: #808080; height: 100%; display: table-row; }</style></head><body><table><tr> <td> <div class="wraper"> <div>111</div> <div>222</div> <div class="td1">333</div> </div> </td> <td> <div class="wraper"> <div>aaa</div> <div class="td2">bbb</div> </div> </td></tr><tr><td colspan="2">colspan=2</td></tr></table></body></html> Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted March 24, 2011 Report Share Posted March 24, 2011 tiusА на ИЕ6-7 забиваем?ТС, а у тебя как так выходит, что слева три строки, а справа две? Quote Link to comment Share on other sites More sharing options...
0 tius Posted March 24, 2011 Report Share Posted March 24, 2011 psywalkerИЕ6 - да, а в Семерочке у меня все ок. Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted March 24, 2011 Report Share Posted March 24, 2011 psywalkerИЕ6 - да, а в Семерочке у меня все ок.Т.е. ИЕ7 у тебя понимает display: table; ? Quote Link to comment Share on other sites More sharing options...
0 tius Posted March 24, 2011 Report Share Posted March 24, 2011 Режим обозревателя ИЕ7 справляется. Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted March 24, 2011 Report Share Posted March 24, 2011 Режим обозревателя ИЕ7 справляется.Он справляется из-за того, что неправильно трактует спеку. Вот смотри.ИЕ7 не понимает display: table-row;, но несмотря на это height: 100%; не растягивает элемент на всю высоту родителя, как это делают нормальный браузеры. Наверное в данном случае поведение ИЕ7 можно считать фичей)) Quote Link to comment Share on other sites More sharing options...
0 drasute Posted March 24, 2011 Author Report Share Posted March 24, 2011 tiusА на ИЕ6-7 забиваем?ТС, а у тебя как так выходит, что слева три строки, а справа две?cмотри внимательнее рисунок, там всего 2 ячейки, в одной 3 блока в другой 2.Например<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css"> html, body { height: 100%; } table { width: 50%; margin: 0 auto; height: 50%; border: 1px solid #000 colapsed; } td { border: 1px solid #000; vertical-align: top; height: 100%; } div { background: #c0c0c0; margin: 0 0 5px; } .wraper { height: 100%; min-height: 100%; width: 100%; display: table; background: none; margin: 0; } .td1, .td2 { background: #808080; height: 100%; display: table-row; }</style></head><body><table><tr> <td> <div class="wraper"> <div>111</div> <div>222</div> <div class="td1">333</div> </div> </td> <td> <div class="wraper"> <div>aaa</div> <div class="td2">bbb</div> </div> </td></tr><tr><td colspan="2">colspan=2</td></tr></table></body></html>спасибо! Quote Link to comment Share on other sites More sharing options...
Question
drasute
Добрый день.
У меня есть таблица, в ячейках которой сидят блоки:
(границы таблицы - синим цветом, дивов - чёрным)
Только не надо спрашивать, зачем я запихиваю в бедную таблицу блоки.
Меня интересуют 2 блока, выделенные красным цветом. Я хочу, чтобы они были выровнены по нижнему краю строки таблицы.
То есть, при любом увеличении/уменьшении окна браузера или разрешения экрана вся эта хрень принимала следующий вид:
Задача вроде элементарная, но я не силён в CSS и не знаю как её решить.
Будьте добры, подскажите.
Edited by drasuteLink to comment
Share on other sites
8 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.