Question

您好我正在开发HTML格式的简历。我的内联块有问题，因为需要使用内联块彼此放置的div未显示预期结果，其中一个div略微向下移动。

这似乎是某种定位问题，但我无法弄明白。 div关注S-box和L-box风格

<!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>

Answer 1

display：inline-block;帮助我们在这里渲染两个方形灰色框彼此相邻。太棒了吧？但是，对于不同的内容，我们需要添加属性vertical-align: top以确保所有内容都与顶部对齐。

div.S-boxes{
    width: 200px;
    height: 150px;
    background-color: #E8E8E8;
    display: inline-block;
  vertical-align:top;
    text-align: right;

}

Answer 2

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;
    }

内联块垂直定位问题

2 个答案: