inline-block vertical positioning issue
Question
Hi I am developing a Resume in HTML. I am having problem with my inline-block as both the div that are required to be placed with each other using inline-block are not showing the expected results one of the div slightly moved downwards.
It seemed to be some sort of positioning issue but I am unable to figure it out. The div are concerned with S-boxes and L-boxes style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8/>
<title>HELLO STRICT</title>
<style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
display: block;
}
h1{
color: #906;
font-family: "Arial Black", Gadget, sans-serif;
margin-bottom: 0px;
}
h4{
margin-bottom: 0px;
margin-top: o;
}
<style>
time
{
font-style: italic;
}
li {
padding-left: 0px;
text-indent: 0em;
}
div.S-boxes{
width: 200px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
text-align: right;
}
div.L-boxes{
width: 500px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
}
p.inbox{
margin-top:16px;
}
</style>
</head>
<body>
<h1>Muhammad Qais</h1>
<div>
<ul style="list-style: none; padding-left: 0px;">
<li>Village Sooj Bahadar, P.O. Mandra.
<li>Tehsil Gujarkhan
<li>District Rawalpindi
<li>Pakistan
</ul>
<table>
<tr>
<td>
<img src="Telephone-icon-1-.gif" width="27" height="27">
</td>
<td>
: +92-347-9714967
</td>
</tr>
<tr>
<td>
<img src="letter_closed.png" width="27" height="27">
</td>
<td>
: muhammadqais32@yahoo.com
</td>
</tr>
</table>
</div>
<div class="S-boxes">
<h4>Objective</h4>
</div>
<div class="L-boxes">
<p class="inbox">Seeking a challenging opportunity where I will be able to utilize my strong organizational skills, educational background, and ability to work well with people, which will allow me to grow personally and professionally. I am self-motivated and able to work both independently and as collaborative team member.</p>
</div>
</body>
</html>
2 answers
solution1
3 2014-03-22 21:08:43
display: inline-block; helps us here to render two square gray boxes next to each other. Awesome, right? However, with varying content, we need to add the property vertical-align: top to make sure everything is aligned to the top.
div.S-boxes{
width: 200px;
height: 150px;
background-color: #E8E8E8;
display: inline-block;
vertical-align:top;
text-align: right;
}
solution2
0 2019-08-27 13:53:09
div.S-boxes{
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
div.L-boxes{
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.