Привязка объекта к низу div

185

Romaldo

28 февраля 2010, 14:21

20512

Ребята! Нужна помощь. Перерыл весь поиск - не нашел нужной информации (если она вообще есть :bl:)

Имеем див

Внутри текст.

--Далее имеем например еще один див, или фото.--

--Он должен приклеится к самому низу дива--

</div>

Как такое сделать?

то есть текст свободно располагается в диве,

а нужный объект прикреплен к нижней стенке.

122

skAmZ

28 февраля 2010, 14:35

#1

К чему такие извраты? Берем 2 дива, 1-му устнавливаем высоту, результат тот же)

skAmZ добавил 28.02.2010 в 17:46

Кажется я что-то недопонимаю, чем элементарный код Вас не устивает


<div style="test">



<div>Внутри текст.</div>





<div>тут объект или рисунок</div>



</div>

Будет вам что вы хотите)

K

76

Kalian

28 февраля 2010, 15:37

#2


.test {
position: relative;
padding-bottom: высота_второго_дива;
}
.test div {
position: absolute;
left: 0;
bottom: 0;
}

122

skAmZ

28 февраля 2010, 16:44

#3

Kalian, мде... сам то проверял что советуешь?) В принципе как вариант подходит, но не в таком виде

185

Romaldo

28 февраля 2010, 19:28

#4

skAmZ:
К чему такие извраты? Берем 2 дива, 1-му устнавливаем высоту, результат тот же)

skAmZ добавил 28.02.2010 в 17:46
Кажется я что-то недопонимаю, чем элементарный код Вас не устивает


<div style="test">



<div>Внутри текст.</div>





<div>тут объект или рисунок</div>



</div>

Будет вам что вы хотите)

В таком случае имеем три дива. Каждому диву нужно задать высоту.

А мне нужно, чтобы, например, имеем див высотой 500px, в нем есть текст, и независимо от его количества, нужный мне объект всегда был внизу, того самого дива (500px)

А вот по поводу:


.test {

position: relative;

padding-bottom: высота_второго_дива;

}

.test div {

position: absolute;

left: 0;

bottom: 0;

}

Прошу немного объяснить. Если этот код прописать в css,

то как будет выглядеть html код?

romagromov добавил 28.02.2010 в 23:42

skAmZ:
К чему такие извраты? Берем 2 дива, 1-му устнавливаем высоту, результат тот же)

Вы правы, в принципе, но такое решение в моем случае - это куча работы в виду массы разных страниц.

То что я хочу - было бы универсальным решением.

И в конце концов, вопрос по синтаксису - есть ли такая команда в css вообще (привязка к бортам дива отдельного объекта)?

K

76

Kalian

28 февраля 2010, 22:22

#5

romagromov код будет выглядеть примерно так:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Заголовок</title>
<meta http-equiv="content-type" content="text/html;charset=win-1251" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
.test {
	background: #eee;
	margin: 5px;
	position: relative;
	height: 400px;
	padding-bottom: 100px;
}
.test div {
	background: #ccc;
	height: 100px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}
</style>
</head>
<body>
<div class="test">
	text
	<div>text</div>
</div>
</body>
</html>

skAmZ, да немного поторопился, не проверил с большим количеством текста. Внутренний див всегда будет внизу, но если текста будет много (в данном случае по высоте больше, чем 400px), то текст будет уезжать ниже внутреннего дива. Если текста не слишком много или вы можете регулировать его количество, то как вариант подойдет.

185

Romaldo

28 февраля 2010, 23:04

#6

Kalian, огромное спасибо за помощь, прошу еще немного помощи.

Я не очень понимаю код, когда стиль прописан самом html...

Как он должен выглядеть в css и как до;ден вызываться в самом html?

и если можно опишите что значит .test и .test div в вашем коде

то есть вопрос такой:

Это стили для двух дивов:

#rm-box {

width: 310px;

height: 225px;

border: 1px solid blue;

padding:5px 5px 5px 5px;

color: white;

}

#rd-box {

width: 310px;

height: 60px;

border: 1px solid red;

padding:5px 5px 5px 5px;

}

соответственно, один я вызываю как <div style="rm-box">, второй <div style="rd-box">

а как реализовать это в моем случае при вашем коде?

спс.

K

76

Kalian

28 февраля 2010, 23:36

#7

Все, что внутри тэга <style> помещайте в свой ксс файл. В вашем случае

.test = #rm-box

.test div = #rd-box

185

Romaldo

28 февраля 2010, 23:51

#8

ясно, спс, еще не пробовал, но смысл ясен.

спс.

Google: E-E-A-T не является фактором ранжирования

Что делать, если ваша email-рассылка попала в спам