How to avoid text going under thumbnail using css
I have a list of posts with thumbnails.
I am trying to prevent the title from going below the image.
I tried white-space: normal
it but it didn't affect the text here. I have also tried float: left
and Display:inline
nothing helped to keep the title next to the image.
CODE CSS & HTML:
ul{
list-style-type:none;
padding:0;
background-color:white;
}
li{
border: 1px solid gray;
width: 325px;
border-bottom:1px solid @border-color;
padding:10px;
white-space: normal;
}
img{
width:80px;
height:80px;
}
.post-title{
display: inline-block;
margin-left:5px;
vertical-align: middle;
}
.post-title a{
white-space: normal;
color:@breadcrumbs-current-color;
}
.post-title p{
margin-bottom:0;
color:gray;
font-size:11px;
}
<ul>
<li>
<a><img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png"/ ></a>
<div class="post-title">
<a>Street Dance Moves Comically Illustrated
<p>200 view</p>
</a>
</div>
</li>
<li>
<a><img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png"/></a>
<div class="post-title">
<a>Hello World
<p>80 view</p>
</a>
</div>
</li>
</ul>
+3
source to share
1 answer
One quick fix is to use max-width
and remove vertical-align
:
ul {
list-style-type: none;
padding: 0;
background-color: white;
}
li {
border: 1px solid gray;
width: 325px;
border-bottom: 1px solid@border-color;
padding: 10px;
white-space: normal;
}
img {
width: 80px;
height: 80px;
}
.post-title {
display: inline-block;
margin-left: 5px;
max-width: 200px;
}
.post-title a {
white-space: normal;
color: @breadcrumbs-current-color;
}
.post-title p {
margin-bottom: 0;
color: gray;
font-size: 11px;
}
<ul>
<li>
<a>
<img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
</a>
<div class="post-title">
<a>Street Dance Moves Comically Illustrated
<p>200 view</p>
</a>
</div>
</li>
<li>
<a>
<img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
</a>
<div class="post-title">
<a>Hello World
<p>80 view</p>
</a>
</div>
</li>
</ul>
But I suggest going with the technique display: table
:
ul {
list-style-type: none;
padding: 0;
background-color: white;
}
li {
display: table;
border: 1px solid gray;
width: 325px;
border-bottom: 1px solid@border-color;
padding: 10px;
white-space: normal;
}
img {
width: 80px;
height: 80px;
}
.post-title {
display: table-cell;
margin-left: 5px;
max-width: 200px;
vertical-align: middle;
}
.post-title a {
white-space: normal;
color: @breadcrumbs-current-color;
}
.post-title p {
margin-bottom: 0;
color: gray;
font-size: 11px;
}
li > a {
width: 90px;
display: table-cell;
vertical-align: middle;
}
<ul>
<li>
<a>
<img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
</a>
<div class="post-title">
<a>Street Dance Moves Comically Illustrated
<p>200 view</p>
</a>
</div>
</li>
<li>
<a>
<img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
</a>
<div class="post-title">
<a>Hello World
<p>80 view</p>
</a>
</div>
</li>
<li>
<a>
<img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
</a>
<div class="post-title">
<a>Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
<p>80 view</p>
</a>
</div>
</li>
</ul>
+3
source to share