Форум Сайтостроение Веб-строительство

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

Romaldo
На сайте с 10.02.2008
Offline
185
Romaldo
20537

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

Имеем див

<div style="test">

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

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

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

</div>

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

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

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

skAmZ
На сайте с 04.09.2009
Offline
122
skAmZ
#1

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

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

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


<div style="test">



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





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



</div>

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

K
На сайте с 29.06.2005
Offline
76
Kalian
#2 


.test {
position: relative;
padding-bottom: высота_второго_дива;
}
.test div {
position: absolute;
left: 0;
bottom: 0;
}
skAmZ
На сайте с 04.09.2009
Offline
122
skAmZ
#3

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

Romaldo
На сайте с 10.02.2008
Offline
185
Romaldo
#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
На сайте с 29.06.2005
Offline
76
Kalian
#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), то текст будет уезжать ниже внутреннего дива. Если текста не слишком много или вы можете регулировать его количество, то как вариант подойдет.

Romaldo
На сайте с 10.02.2008
Offline
185
Romaldo
#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
На сайте с 29.06.2005
Offline
76
Kalian
#7

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

.test = #rm-box

.test div = #rd-box

Romaldo
На сайте с 10.02.2008
Offline
185
Romaldo
#8

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

спс.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий