как сделать такое на div

felix_ · January 17, 2011

css

#test {
	margin-left:1px;
	margin-top:1px;
	border:1px solid #9999FF;	

	float:left;
	width:30%;
	height:250px;
	display:block;
	background-color:#DEDEFF;
	padding:1%;
	overflow: hidden;
}

html

<div id='test'>
  <table border='0' height='100%'>
	<tr>
	  <td height='80%' valign='top'>
		  первое
	   </td>
	</tr>
	<tr>
	  <td>
		 второе
	  </td>
	 </tr>
   </table>
  </div>

как можно заменить таблицу div ?

когда вставлял 2 div vertical-align:bottom; не работал.

Vlad · January 18, 2011

Зачем таблицу заменять дивами? Никогда же не просят деревянный брус превратить в кирпичи.

fan · January 18, 2011

Не понимаю этой дурости, делать всё или на ДИВах или в таблицах.

Делать нужно как проще и удобней. А не гнаться за дурацкой модой.

Таблица и ДИВ это разные вещи, и они в какой то степени перекрывают возможности друг друга, но не заменяют!!!!!

psywalker · January 18, 2011

ТС, а что ты хочешь получить?

rus · January 18, 2011

когда вставлял 2 div vertical-align:bottom; не работал.

два дива друг под другом что ли?

felix_ · January 18, 2011

ну хотел чтоб получилось 2 div друг под другом, при этом верхний div 80%(от <div id='test'>) и текст выравнивался в нём по верху, а нижний div занимал остальные 20% (от <div id='test'>) и текст выравнивался по низу.

когда эксперементировал вроде получилось сделать всё кроме выравнивания в нижнем div (по низу)

<html>
<head>
<style>
	html,body {
		width:100%;
		height:100%;
	}
	#test {
		width:30%;
		height:250px;
		border:1px solid black;
	}	
	#dv1 {
		border:1px solid black;
		height:80%;
	}
	#dv2 {
		border:1px solid black;
		height:20%;
		vertical-align:bottom;
	}
</style>
</head>
<body>
<div id='test'>
	<div id='dv1'>
		sss
	</div>
	<div id='dv2'>
		sss1
	</div>
</div>
</body>
</html>

не пойму почему vertical-align:bottom; в #dv2 не работает

Edited January 18, 2011 by felix_

rus · January 18, 2011

может: vertical-align:text-bottom; ?

Vlad · January 18, 2011

vertical-align не работает для блочных элементов!

psywalker · January 18, 2011

ТС, прижми текст абсолютом к низу

felix_ · January 18, 2011

ТС, прижми текст абсолютом к низу

спасибо, в итоге работает вот так

<html>
<head>
<style>
	html,body {
		width:100%;
		height:100%;
	}
	#test {
		width:30%;
		height:250px;
		border:1px solid black;
	}	
	#dv1 {
		border:1px solid black;
		height:100%;
	}
	#dv2 {
		border:1px solid black;		
		bottom:0;
	}
</style>
</head>
<body>
<div id='test'>
	<div id='dv1'>
		sss
	</div>
	<div id='dv2'>
		sss1
	</div>
</div>
</body>
</html>

psywalker · January 19, 2011

Молодец! Сразу бы так

Sign In

как сделать такое на div

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information