Hello, I have a problem
I can't write CSS in any way so that the text appears at the bottom of the image and it looks good
<html>
<div class="test">
<a target="_blank">
<img src="images/55551556.jpg" width="200" height="200">
</a>
<span class="desc"<p>55551556</p><span>
</div>
</html>
css
div gallery {
margin: 5px
border: 1px solid #ccc;
float: left;
width: 200px
height: 200px;
position: relative;
line-height: 200px
}
div.gallery:hover {
border: 1px solid #000;
}
div.gallery img {
width: 100%
height: auto;
vertical-align: up;
}
span.desc {
left: 0;
top: 0;
text-align: bottom;
position: absolute;
bottom: 0;
right: 0;
width: 100%
height: 100%;
}
I'm bad at CSS
i set the bottom parameter but the text is somewhere at the bottom not at the top.
You have a block element <p>...</p> inserted into the inline <span...>...<span>, what is not logical. Another span is both opening, but there is no closing one. Without elementary concepts in layout, you will not be able to clearly ask a question, and we will not be able to help you correctly.
Try like that:
<html>
<div class="test">
<a target="_blank"><img src="images/55551556.jpg" width="200" height="200"></a>
<br>
<span class="desc">55551556</span>
</div>
</html>
or this:
<html>
<div class="test">
<a target="_blank"><img src="images/55551556.jpg" width="200" height="200"></a>
<p><span class="desc">55551556</span></p>
</div>
</html>
There are many options depending on the task.