проблема вертикального позиционирования встроенного блока

Question

проблема вертикального позиционирования встроенного блока

0

Привет, я разрабатываю резюме в HTML. У меня проблема с моим встроенным блоком, так как оба div, которые должны быть размещены друг с другом с помощью встроенного блока, не показывают ожидаемых результатов, один из div немного перемещается вниз.

Казалось, это какая-то проблема с позиционированием, но я не могу это понять. В div участвуют S-боксы и стиль L-боксов

<!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>
                : [email protected]
                </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>

Faisal Naseer 22 март 2014, в 21:44

Источник

1

добавить вертикальное выравнивание: сверху к S-блокам.
Ali Nouman 22 март 2014, в 20:34
0

@Humanlove спасибо, что работал на меня. но в чем причина этого?
Faisal Naseer 22 март 2014, в 20:38
1

значение по умолчанию для inline-block - baseline, поэтому нам нужно определить vertical-align: top, проверьте это developer.mozilla.org/en/CSS/vertical-align
Ali Nouman 22 март 2014, в 20:43
1

возможный дубликат CSS: неожиданное вертикальное положение элементов "inline-block"
Hashem Qolami 22 март 2014, в 20:49

Показать ещё 2 комментария

Теги:

html

css

html5

1 ответ

Ещё вопросы

добавить вертикальное выравнивание: сверху к S-блокам.
@Humanlove спасибо, что работал на меня. но в чем причина этого?
значение по умолчанию для inline-block - baseline, поэтому нам нужно определить vertical-align: top, проверьте это developer.mozilla.org/en/CSS/vertical-align
возможный дубликат CSS: неожиданное вертикальное положение элементов "inline-block"

Arjun Chaudhary · Answer 1 · 2014-03-22T19-25-00.000Z

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;

}