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

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

1 голос
/ 15 ноября 2010

У меня проблема с выделением некоторых элементов 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, который содержит изображения. Почему это так и как я могу это исправить?

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

Ответы [ 6 ]

1 голос
/ 15 ноября 2010

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

1 голос
/ 15 ноября 2010

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

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

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

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

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

(...)

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

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

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

0 голосов
/ 15 ноября 2010

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

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

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

0 голосов
/ 15 ноября 2010

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

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

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

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

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

0 голосов
/ 15 ноября 2010

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

// EDIT

вот, пожалуйста, я полностью исправил вашу разметку: 

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

...