display: table

Scrum · March 13, 2010

Виват всем.

простейший вариант.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  html, body {
	margin: 0;
	padding: 0;
	border: none;
	height: 100%;
  }
  div {
	background: silver;
	border-top: 10px dashed red;
	display: table;
	height: 100%;
  }


  /*]]>*/
  </style>
</head>

<body>
	<div>
		<p>Aliquam lacinia aliquam orci in congue. Sed laoreet volutpat imperdiet. Phasellus non neque ut risus scelerisque tristique eu non erat? Maecenas fringilla ligula vitae arcu mollis mattis. Curabitur suscipit ipsum erat. Phasellus sodales sem et neque porttitor et placerat tellus sodales. Maecenas sollicitudin accumsan magna, at semper elit volutpat sit amet. Suspendisse potenti. Vestibulum elementum mi non risus faucibus quis varius urna rhoncus. Vivamus at ligula nunc. Vivamus accumsan semper velit, ut aliquam felis tempus vitae. Sed a felis ac mauris placerat iaculis imperdiet eget enim. Donec orci leo, commodo quis commodo ac, suscipit non felis.</p>
	</div>
</body>

</html>

display: table; - Определяет, что элемент является блочной таблицей подобно использованию тега <TABLE>.

Не совсем как <table>, по непонятным причинам прибавляет высоту бордера. Кто то сталкивался ? или может этому есть разумное объяснение ?

p.s. ведет себя так во всех бр. (ie7, 6 - в расчет не беру)

klierik · March 14, 2010

border-top: 10px dashed red;

а разве не должен?

Scrum · March 14, 2010

Да подзабыл, но <table> так не считает.

klierik · March 14, 2010

все же div не table

div получает свойства table, но, по всей видимости, своих он не теряет.

Sign In

display: table

Question

Scrum

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information