Разное положение DIV, содержащее текст и DIV, содержащие изображения

Question

У меня возникла проблема с изложением некоторых элементов div.

Я получил следующую структуру.

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

CSS:

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

DIV, которые содержат текстовые (H3 и H4) элементы, немного меньше, как DOV, которые содержат изображения. Там нет маржи или прокладки на любом элементе. Высота всех DOV такая же, но на вершине DOV есть все еще несколько пробелов с классовым списком навыков, содержащих текст. Над DIV нет пробелов, который содержит изображения. Почему это и как я могу это исправить?

Пример: Нажимать

Answer 1

попробуйте добавить vertical-align:top; к вашим CSS на все предметы смещены. Работал, когда я сделал это, используя Firebug на вашей тестовой странице.

Answer 2

Несколько вещей:

• Вы, кажется, злоупотребляете html -элементами: h3, h4, и т. д. заголовки.
• С другой стороны, вы используете слишком много DIV. Рассмотрим множество других HTML -элементов, которые существуют. Например, элементы, которые вы называете «Skillist», кричат, чтобы быть списками (ol,ul).
• Если вы беспокоитесь о небольших промежутках пикселей, подобных этому, HTML/CSS может быть неправильным инструментом для вас. Вся концепция HTML/CSS должна быть гибкой и обеспечивать различные визуализации в разных системах, а не для Pixel Perfect Design Tool.
• Ваша проблема может быть связана с тем, что по умолчанию изображения являются встроенными элементами, которые находятся на базовой линии шрифта и оставляют место для потомков. Попробуйте настроить vertical-align: bottom на изображениях.

Answer 3

Не видя вашего CSS, трудно сказать.

Вы должны помнить, что у каждого элемента есть стиль по умолчанию, предоставленный стандартом/браузером. Чтобы превзойти это, вы должны явно определить свои собственные ценности.

Например, большинство браузеров определяют, что цвет по умолчанию страниц будет: #FFFFFF

Чтобы изменить его, вы должны обеспечить свою собственную ценность.

Надеюсь это поможет.

Answer 4

Это может быть связано с полями, которые браузеры автоматически добавляют в теги H (а также P и некоторые другие теги).

Это может помочь использовать лист стиля сброса CSS, чтобы удалить большую часть поля по умолчанию и заполнения, которые различные браузеры видят по -разному. Есть один в http://developer.yahoo.com/yui/3/cssreset/

Я согласен с Tobiasmay - это поможет, если бы у нас была демонстрационная страница или что -то в этом роде.

Answer 5

Можете ли вы опубликовать несколько CSS или настроить jsfiddle.net, пожалуйста? иначе трудно помочь вам исправить свои доли ..

//РЕДАКТИРОВАТЬ

Вот и вы, я полностью исправил вашу наценку:

<div id="skills">
<div class="skillA">
  <h3 class="skill">Skill A</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
<div class="skillB">
  <h3 class="skill">Skill B</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
</div>

и CSS с рабочим Ul Li

#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}

Вот ссылка на скрипку: http://jsfiddle.net/tobiasmay/gkrks/

Answer 6

Добавлять vertical-align: top или же vertical-align: bottom (в зависимости от того, что вы предпочитаете) div.inline правило Это заставляет его работать во всех браузерах.

Причина, по которой девтус с изображениями позиционируется немного выше, чем другие, связана с То, как встроенные блоки выровнены в их сдерживающей линейной коробке:

(...) [B] Волы изложены горизонтально, один за другим, начиная с верхней части содержащегося блока. Горизонтальные края, границы и прокладки уважаются между этими коробками. (...) прямоугольная область, содержащая коробки, которые образуют линию, называется линейная коробка.

(...)

Линейная коробка всегда достаточно высокая для всех ящиков, которые он содержит. Тем не менее, он может быть выше самой высокой коробки, в которой он содержится (если, например, коробки выровнены, так что базовые линии выстроены). Когда высота коробки B меньше, чем высота линейной коробки, содержащей его, вертикальное выравнивание B в линейном поле определяется 'вертикальный пример' имущество.

Обратите внимание на смелую часть. Значение по умолчанию vertical-align является baseline. Анкет Изображения в вашем примере перемещаются в линейном поле, чтобы выровнять их с базовой линейкой окружающего текста. При этом они увеличивают высоту линейного ящика, оставляя несколько дополнительных пробелов на вершине текстовых DOV.

Если вы все еще не совсем понимаете, что происходит, попробуйте увеличить font-size принадлежащий h4 в вашем примере, скажем, 32px, и удалите фиксированную height из .skilllist div.