выравнивание блоков в ячейках таблицы

drasute · March 22, 2011

Добрый день.

У меня есть таблица, в ячейках которой сидят блоки:

(границы таблицы - синим цветом, дивов - чёрным)

Только не надо спрашивать, зачем я запихиваю в бедную таблицу блоки.

Меня интересуют 2 блока, выделенные красным цветом. Я хочу, чтобы они были выровнены по нижнему краю строки таблицы.

То есть, при любом увеличении/уменьшении окна браузера или разрешения экрана вся эта хрень принимала следующий вид:

Задача вроде элементарная, но я не силён в CSS и не знаю как её решить.

Будьте добры, подскажите.

Edited March 22, 2011 by drasute

drasute · March 23, 2011

+

tius · 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>

psywalker · March 24, 2011

tius

А на ИЕ6-7 забиваем?

ТС, а у тебя как так выходит, что слева три строки, а справа две?

tius · March 24, 2011

psywalker

ИЕ6 - да, а в Семерочке у меня все ок.

psywalker · March 24, 2011

psywalker
ИЕ6 - да, а в Семерочке у меня все ок.

Т.е. ИЕ7 у тебя понимает display: table; ?

tius · March 24, 2011

Режим обозревателя ИЕ7 справляется.

psywalker · March 24, 2011

Режим обозревателя ИЕ7 справляется.

Он справляется из-за того, что неправильно трактует спеку. Вот смотри.

ИЕ7 не понимает display: table-row;, но несмотря на это height: 100%; не растягивает элемент на всю высоту родителя, как это делают нормальный браузеры. Наверное в данном случае поведение ИЕ7 можно считать фичей))

drasute · 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>

спасибо!

Sign In

выравнивание блоков в ячейках таблицы

Question

drasute

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

drasute

Link to comment

Share on other sites

tius

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

tius

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

tius

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

drasute

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information