Jump to content
  • 0

Блок, в котором текст выравнивается от низа


Избранный
 Share

Question

Блок может быть произвольной ширины и высоты (или, если при таком условии это не возможно, тогда допустим он фиксированной высоты в 100 и ширины в 150).

Текст как видите выравнивается от низа.

В случаи двух строк чёрный фон растягивается (или, если при таком условии это не возможно, то на всю длину он не растягивается).

1UWBS6oZSG.jpg

Как?

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Для начала не плохо бы посмотреть вашу разметку.

Попробовал догадаться что нужно:

<?xml version="1.0" encoding="utf-8"?>
<!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</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">
* {
margin: 0;
padding: 0;
}

img {
width: 100px;
height: 100px;
border: 1px solid;
}

dl {
width: 100px;
height: 200px;
position: relative;
}

dd {
position: absolute;
bottom: 0;
background: #000;
color: #fff;
}
</style>
</head>
<body>

<dl>
<dt>
<img src="www.ru" alt="" />
</dt>
<dd>
text text
</dd>
</dl>

</body>
</html>

Edited by Great Rash
Link to comment
Share on other sites

  • 0

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.holder-image{
float:left;
display:inline;
overflow:hidden;
position:relative;
margin:0 20px;
}
.holder-image img{
display:block;
margin:0;
border:0;
}
.description{
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
}
</style>
<script type="text/javascript">
function startScript(){
widthBlock();
}

function widthBlock(){
var _block = document.getElementsByTagName('div');
var _stringHeight = 30;

for(var i=0; i<_block.length; i++){
if (_block[i].className.indexOf('holder-image')!=-1){
var _descriptionBlock = _block[i].getElementsByTagName('div');
for(var j=0; j<_descriptionBlock.length; j++){
if (_descriptionBlock[j].className.indexOf('description')!=-1){
_descriptionBlock[j].style.width=_descriptionBlock[j].parentNode.offsetWidth+'px'
if (_descriptionBlock[j].offsetHeight<_stringHeight){
_descriptionBlock[j].style.width='auto';
}
}
}
}
}
}


if (window.addEventListener){
window.addEventListener("load", startScript, false);
} else if (window.attachEvent){
window.attachEvent("onload", startScript);
}
</script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<div class="holder-image">
<img src="autumn.gif" alt="" />
<div class="description">
Lorem ipsum dolor.
</div>
</div>
<div class="holder-image">
<img src="autumn.gif" alt="" />
<div class="description">
Lorem ipsum dolor sit amet consectetuer sed Nam risus risus facilisi.
</div>
</div>
<div class="holder-image">
<img src="autumn.gif" alt="" />
<div class="description">
Lorem ipsum dolor.
</div>
</div>
<div class="holder-image">
<img src="../ava/mishka150x150.jpg" alt="" />
<div class="description">
Lorem ipsum dolor sit amet consectetuer
</div>
</div>
</div>
<!-- end wrapper -->
</body>
</html>

_stringHeight это высота блока с описанием если в нем только одна строка

Только в ие6 нехочет работать :) блок с описанием растягивается на всю ширину независимо от высоты. В джс я ток начинающий, поэтому непонимаю почему так... несрабатывает

_descriptionBlock[j].style.width='auto';

Если в пикселях задать то работает. Может подскажет кто что не так?

Link to comment
Share on other sites

  • 0

Если на ие можна забить то и "auto" вполне хватает. Кстати может ктонибудь посмотреть как это ведет себя в ие7-ие8, так как они у меня портейблы и неподдерживают джс...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy