I am trying to make a little game to learn some javascript.
Ok, so I was using untill now a table for my content (image):
Now, what I am trying to do, is to use divs instead of table. But I want to position them to look similar to the image above.
This is what i have now:
My code for the Lemonade stand div (its similar for the others):
<div style="background: url(images/texture.png); display: table; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>
I am beginner, trying to learn. Thanks!
div will like as table if you add next styles:
display:table; to div table-analog
display:table-row; to div tr-analog
display:table-cell; to div td-analog;
<div style="display: table;">
<div style="display: table-row;">
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>
<div style="background: url(images/texture.png); display: table-cell; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> <span id="pretlevel"> 0 </span> $ </div>
</div>
DEMO http://jsfiddle.net/o7jarr8n/
HTML
<div class="row">
<div class="box">1</div>
<div class="box">2</div>
</div>
<div class="row">
<div class="box">3</div>
<div class="box">4</div>
</div>
CSS
.row {
margin: 0 auto;
text-align:center;
display:block; // change line
}
.box {
display:inline-block; // same line
background:red;
width:100px;
height:50px;
margin:5px;
}
inline-block, will make div next to each other
Well, you have different options here.
You can use inline-block as display.
You can use float: left with width: 40% for example.
So, for diversity here it is with floated divs.
Also, notice I've placed the css as an external thing so you can have a good base to really learn how to do things.
I've used class selectors, and if you don't know what it is I advice you to look for them. They are the basic of CSS.
.item {
background: url(images/texture.png);
border: solid black 2px;
padding: 10px;
width: 40%;
float: left;
}
.line {
padding-bottom: 7px;
}
.item-container {
max-width: 300px;
}
<div class="item-container">
<div class="item">
<div class="line">
<b>Lemonade stand</b>
</div>
<div class="line">
<button id="countButton" style="padding: 2px;">
<img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
</button>
</div>
<div><b>Level:</b><span id="displayLevel"> 1 </span>
<img src="images/plus.png" id="buyLevel" width="20px" height="18px">
</div>
<div><b>Production:</b><span id="production"> 1 </span> $</div>
<div>(Prod. per click)
</div>
<div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
</div>
<div class="item">
<div class="line">
<b>Lemonade stand</b>
</div>
<div class="line">
<button id="countButton" style="padding: 2px;">
<img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px">
</button>
</div>
<div><b>Level:</b><span id="displayLevel"> 1 </span>
<img src="images/plus.png" id="buyLevel" width="20px" height="18px">
</div>
<div><b>Production:</b><span id="production"> 1 </span> $</div>
<div>(Prod. per click)
</div>
<div><b>Level price:</b><span id="pretlevel"> 0 </span> $</div>
</div>
</div>
And I've placed both item inside item-container and you can manipulate the width of the parent to achieve a grid system if you desire.
Just a quick note also, if you use float look what is a clearfix. What is a clearfix?
Or using table, table-row, table-cell for display divs
div container isn't centered vertically, only horizontally... You can use, for example, margin:100px auto; ....
JSFiddle example (not centered vertically :( )
You can use either display: table (which has some browser compatibility issues) and display: inline-block (which I preffer):
<div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Lemonade stand</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div><div style="background: url(images/texture.png);display:inline-block;width:45%; margin-left: auto; margin-right:auto; border: solid black 2px; padding: 10px">
<div style="padding-bottom: 7px"><b><center>Restaurant</center></b></div>
<div style="padding-bottom: 7px"><center><button id="countButton" style="padding: 2px;"><img src="images/lemonade.png" width="50px" height="50px" style="padding: 2px"></button></center></div>
<div><b><font color="brown">Level:</font></b></td> <td> <span id="displayLevel"> 1 </span> <img src="images/plus.png" id="buyLevel" width="20px" height="18px"></div>
<div><b><font color="green">Production:</font></b> </td> <td> <span id="production"> 1 </span> $ </div>
<div> <font style="font-size: 15px">(Prod. per click) </font> </div>
<div><b><font color="red">Level price:</font></b> </td> <td> <span id="pretlevel"> 0 </span> $ </div>
</div>
.bloc {
background: url(images/texture.png);
display: inline-block;
margin-left: auto;
margin-right:auto;
border: solid black 2px;
padding: 10px
}
.bloc-title {
padding-bottom: 7px;
font-weight : bold;
text-align : center;
}
.bouton-count {
padding: 2px;
}
.bloc-main-image {
padding: 2px;
width : 50px;
height : 50px;
}
.bloc-level-name {
font-weight : bold;
color : brown;
}
.bloc-image-plus {
width : 20px;
height : 18px;
}
.bloc-production {
font-weight : bold;
color : green;
}
.bloc-prod-per-click {
font-size : 15px;
}
.bloc-level-price {
color : red;
font-weight : bold;
}
.custom-table {
display : table;
width : 100%;
}
.custom-cell {
display : table-cell;
vertical-align : middle;
}
.custom-cell-right {
text-align : right;
]
<div class="custom-table">
<div class="custom-cell custom-cell-right">
<div class="bloc">
<div class="bloc-title">
Lemonade stand
</div>
<div class="bloc-title">
<button id="countButton" class="bouton-count">
<img src="images/lemonade.png" class="bloc-main-image">
</button>
</div>
<div>
<span class="bloc-level-name">Level:</span>
<span id="displayLevel">1</span>
<img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
</div>
<div>
<span class="bloc-production">Production:</span>
<span id="production">1</span>
$
</div>
<div class="bloc-prod-per-click">
(Prod. per click)
</div>
<div>
<span class="bloc-level-price">Level price:</span>
<span id="pretlevel"> 0 </span> $ </div>
</div>
</div>
<div class="custom-cell">
<div class="bloc">
<div class="bloc-title">
Lemonade stand
</div>
<div class="bloc-title">
<button id="countButton" class="bouton-count">
<img src="images/lemonade.png" class="bloc-main-image">
</button>
</div>
<div>
<span class="bloc-level-name">Level:</span>
<span id="displayLevel">1</span>
<img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
</div>
<div>
<span class="bloc-production">Production:</span>
<span id="production">1</span>
$
</div>
<div class="bloc-prod-per-click">
(Prod. per click)
</div>
<div>
<span class="bloc-level-price">Level price:</span>
<span id="pretlevel"> 0 </span> $ </div>
</div>
</div>
</div>
<div class="custom-table">
<div class="custom-cell custom-cell-right">
<div class="bloc">
<div class="bloc-title">
Lemonade stand
</div>
<div class="bloc-title">
<button id="countButton" class="bouton-count">
<img src="images/lemonade.png" class="bloc-main-image">
</button>
</div>
<div>
<span class="bloc-level-name">Level:</span>
<span id="displayLevel">1</span>
<img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
</div>
<div>
<span class="bloc-production">Production:</span>
<span id="production">1</span>
$
</div>
<div class="bloc-prod-per-click">
(Prod. per click)
</div>
<div>
<span class="bloc-level-price">Level price:</span>
<span id="pretlevel"> 0 </span> $ </div>
</div>
</div>
<div class="custom-cell">
<div class="bloc">
<div class="bloc-title">
Lemonade stand
</div>
<div class="bloc-title">
<button id="countButton" class="bouton-count">
<img src="images/lemonade.png" class="bloc-main-image">
</button>
</div>
<div>
<span class="bloc-level-name">Level:</span>
<span id="displayLevel">1</span>
<img src="images/plus.png" id="buyLevel" class="bloc-image-plus">
</div>
<div>
<span class="bloc-production">Production:</span>
<span id="production">1</span>
$
</div>
<div class="bloc-prod-per-click">
(Prod. per click)
</div>
<div>
<span class="bloc-level-price">Level price:</span>
<span id="pretlevel"> 0 </span> $ </div>
</div>
</div>
</div>
I put your css away and I used 2 div container to simulate a table behaviour.
Here I "packed" your bloc in 2 <div>, one with the CSS property display : table which render a table row, and the sub <div> with the property display : table-cell which render a table-cell.
Related
All my pictures must meet the following criteria:
1). Whenever using computer or cell phone to view, must appear 4 items on same line, without RWD function.
2) No matter what the height and width measurements all outer frame must be identical, I spent days to adjust like this, but I found distance from picture to picture (https://drive.google.com/file/d/1fsUN5ms1U4hfSoXl-oNcvEiwBwfVNpoZ/view?usp=sharing) are different, please advise how to adjust all spaces between pictures to be exactly the same.
Another question is how to control ever line's spacing? If I key in xxx, every line's space height will be too wide, need to shrink the height, I still cannot solve through setting, can anyone lend a helping hand? Appreciate it very much.[problem][1]
website URL
<table class="table table-borderless" style="margin:0px 0px;" cellpadding="3">
<tr>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/001.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/002.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/003.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/004.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/005.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/006.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/007.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/008.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/009.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/010.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
</table>
You should not be using table.
You should be using the grid layout.
Here is a great guide.
EDIT:
Does this work for you?
.grid-container {
display: grid;
/* Use % instead of px for it to be proportionnal to the frame width */
grid-template-columns: 20% 20% 20% 20%;
grid-gap: 15px;
padding: 0px;
}
.grid-item {
background-color: lightgreen;
}
.grid-item>img{
/* make it so the image take up the whole grid-item width */
width: 100%;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="">
IMAGE
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
</div>
I tried to search the internet, but I saw nothing. My problem is very easy, I have 2 icons and want one of them to be aligned to the left and the other on to the right. The code follows:
<div class="container">
<div class="row">
<div style="cursor: pointer" onclick="window.history.back()">
<div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
<div class="icon color-1" style="margin-bottom: 0">
<i class="lni-pointer-left"></i>
</div>
</div>
</div>
<div style="cursor: pointer" onclick="window.history.back()">
<div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
<div class="icon color-1" style="margin-bottom: 0">
<i class="lni-pointer-left"></i>
</div>
</div>
</div>
</div>
</div>
P.S.: Float: right didn't help...
Add This Class d-flex justify-content-between
<div class="container">
<div class="d-flex justify-content-between">
<div style="cursor: pointer" onclick="window.history.back()">
<div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
<div class="icon color-1" style="margin-bottom: 0">
<i class="lni-pointer-left">Icon 1</i>
</div>
</div>
</div>
<div style="cursor: pointer" onclick="window.history.back()">
<div class="back-button" data-wow-delay="0.2s" style="padding: 0 0 0 25px">
<div class="icon color-1" style="margin-bottom: 0">
<i class="lni-pointer-left">Icon 2</i>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/lalji1051/th05ad8c/1/
flexbox works best as it offers minimal code. follow the example below:
#icon-row {
display: flex;
justify-content: space-between;
padding: 20px;
border: 1px solid lightgrey;
}
a {
cursor: pointer;
background-color: lightgrey;
padding: 5px;
}
<div id="icon-row">
<a>icon</a>
<a>icon</a>
</div>
I cannot find out why text1 does not center horizontally and why the icons do not appear (I have only a black point instead of blue icon and
circle).
<div id="texte_services">
text1
</div>
<div class="flex-container">
<div class="row">
<div class="column">
<p class="contenu">
<img src="../Images/screen.png" alt="screen">
</p>
</div>
</div>
<table>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
</table>
</div>
CSS
#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
article
{
margin-right: 20px;
flex: 3;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
h3, p
{
margin: 20px;
}
#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}
The reason is because you didnt include the link to font-awesome.min.css I just added it and everything works fine.
#texte_services
{
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
article
{
margin-right: 20px;
flex: 3;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}
h3, p
{
margin: 20px;
}
#flex-container {
display: flex;
justify-content: center;
margin-top: -20px;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="texte_services">
text1
</div>
<div class="flex-container">
<div class="row">
<div class="column">
<p class="contenu">
<img src="../Images/screen.png" alt="screen">
</p>
</div>
</div>
<table>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
<tr>
<td>
<div class="bullet">
</div>
<span class="blueText"><i class="fa fa-line-chart fa-lg"></i>
</span>
<span class="bluePoint">•
</span>
<span class="titleText">
</span>
</td>
<td>
<h3>UX design
</h3>
<p>text2
</p>
</td>
</tr>
</table>
</div>
I am working on a webpage that displays the users' personal information, and I would like to align vertically the spans colored in red using Bootstrap.
The following is a screenshot of my form:
and here is the HTML/CSS code I am using:
HTML
<table class="table">
<tbody>
<div class="col-sm-6 test">
<span class=""><strong >First Name: </strong></span>
<span class="" style="color:red" >FirstName</span>
</div>
<div class="col-sm-6 test">
<strong class="">Age: </strong>
<span class="" style="color:red">Age</span>
</div>
<div class="col-sm-6 test">
<strong class="">Last Name: </strong>
<span class="" style="color:red">LastName</span>
</div>
<div class="col-sm-6 test" >
<strong class="">Status: </strong>
<span class="" style="color:red">Status</span>
</div>
</tbody>
</table>
CSS
.test{
border-top: 1px solid #e2eae9; vertical-align: middle; padding: 6px 8px;
}
You can try using display table-row and display table-cell
Result: jsfiddle
.test{
border-top: 1px solid #e2eae9; vertical-align: middle; padding: 6px 8px;
display: table-row;
}
Result: jsfiddle
.test span{
display: table-cell;
}
Alternatively using bootstrap, you can make your test div as rows and your span as columns:
<div class="row test">
<span class="col-sm-6"><strong >First Name: </strong></span>
<span class="col-sm-6" style="color:red" >FirstName</span>
</div>
If you mean to stack the red text under the "labels" then you could do something like this:
<table class="table">
<tbody>
<div class="col-sm-6 test">
<span class="col-sm-12"><strong >First Name: </strong></span>
<span class="col-sm-12" style="color:red" >FirstName</span>
</div>
<div class="col-sm-6 test">
<strong class="col-sm-12">Age: </strong>
<span class="col-sm-12" style="color:red">Age</span>
</div>
<div class="col-sm-6 test">
<strong class="col-sm-12">Last Name: </strong>
<span class="col-sm-12" style="color:red">LastName</span>
</div>
<div class="col-sm-6 test" >
<strong class="col-sm-12">Status: </strong>
<span class="col-sm-12" style="color:red">Status</span>
</div>
</tbody>
</table>
I have been working on 5 rows which has different number of images as shown in code and fiddle
I have a problem making the width of image container same with respect to number images in each row, like in code first row has some 5 images , second row has 2 images , what i have been trying is the image container in second row should be same width as image container in first row
and the row of most images in it should occupy 100% width, i have tried a lot figuring the mistake. I don't want to use JavaScript
HTML code
<div class="con">
<span style="display:table-cell;padding:11px;background-color:#D1D5D8;position:relative;">
<span class="top-20-lable">a-block</span>
<span style="display:block;text-align:right;margin-bottom:5px;">
<span class="top-add-tags">Tag 1</span>
<span class="top-add-tags">Tag 2</span>
</span>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
</span>
</div>
<div class="con">
<span style="display: inline-block; padding: 11px; background-color: #D1D5D8; position: relative;">
<span class="top-20-lable">b-block</span>
<span style="display: block; text-align: right; margin-bottom: 5px;">
<span class="top-add-tags">Tag 1</span>
<span class="top-add-tags">Tag 2</span>
</span>
<div class="imgHolder">
<img src="" /></div>
<div class="imgHolder">
<img src="" /></div>
<div class="imgHolder">
<img src="" /></div>
<div class="imgHolder">
<img src="" /></div>
</span>
</div>
<div class="con">
<span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
<span class="top-20-lable">c-block</span>
<span style="display:block;text-align:right;margin-bottom:5px;">
<span class="top-add-tags">Tag 1</span>
<span class="top-add-tags">Tag 2</span>
</span>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
</span>
</div>
<div class="con">
<span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
<span class="top-20-lable">d-block</span>
<span style="display:block;text-align:right;margin-bottom:5px;">
<span class="top-add-tags">Tag 1</span>
<span class="top-add-tags">Tag 2</span>
</span>
<div class="imgHolder"><img src="" /></div>
</span>
</div>
<div class="con">
<span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
<span class="top-20-lable">d-block</span>
<span style="display:block;text-align:right;margin-bottom:5px;">
<span class="top-add-tags">Tag 1</span>
<span class="top-add-tags">Tag 2</span>
</span>
<div class="imgHolder"><img src="" /></div>
<div class="imgHolder"><img src="" /></div>
</span>
</div>
CSS
.con {
width: 100%;
margin: 10px;
overflow: hidden;
padding:2px;
display: table;
}
.imgHolder{
border:6px solid #D1D5D8;
border-top:3px;
width:240px;
height:9vw;
font-size:12px;
text-align:left;
display: table-cell;
background-color:#fff;
}
.imgHolder > img{
max-width:100%;
max-height:100%;
vertical-align:top;
}
.top-20-lable {
position:absolute;
left:20px;
top:10px;
font-weight: bold;
}
.top-add-tags {
background-color:#009DD9;
color:#fff;
padding:2px 5px;
font-size:12px;
}
JSFiddle
If you are using bootstrap add the class img-responsive to the images:
<img class="img-responsive" src="" />
If not, you can create a css class like the follow:
.image-responsive {
height: auto;
max-width: 100%;
}