Различная позиция div, содержащего текст, и div, содержащего изображения

Question

Различная позиция div, содержащего текст, и div, содержащего изображения

У меня проблема с выделением некоторых элементов 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, содержащие элементы text (h3 и h4), немного меньше элементов div, содержащих изображения. На любом элементе нет полей или отступов. Высота всех элементов div одинакова, но все еще есть пробелы в верхней части элементов div с классом skilllist, содержащим текст. Там нет пробелов выше div, который содержит изображения. Почему это и как я могу это исправить?

Пример: нажмите

1

html css xhtml outlining

Источник

user443523 15 ноя '10 в 14:10

6 ответов

Решение

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

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

1

Источник

user318493 15 ноя '10 в 14:46

Можете ли вы опубликовать некоторые 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/

0

Источник

user493049 15 ноя '10 в 14:16

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

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

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

0

Источник

user156532 15 ноя '10 в 14:21

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

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

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

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

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

0

Источник

user334457 15 ноя '10 в 14:21

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

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

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

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

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

0

Источник

user23263 16 ноя '10 в 17:20

Другие вопросы по тегам html css xhtml outlining

user156532 15 ноя '10 в 16:25 2010-11-15 16:25 · Accepted Answer · 2010-11-15 16:25

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

1

Источник

user156532 15 ноя '10 в 16:25