#html #css
#HTML #css
Вопрос:
Уважаемые участники этого замечательного форума
Недавно я снова начал использовать Html, и, ради всего Святого, я не могу понять, в чем проблема.
Я создал 3 Div, каждый с 1 изображением, 1 группой изображений и снова 1 изображением. (та же проблема, если все находятся в одном div, с довольно простым Css)
.HeaderNav {
margin: 0;
padding: 0;
overflow: auto;
opacity: 1;
overflow-x: hidden;
overflow-y: hidden;
display: block;
}
И Html для его использования.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" class="HeaderNav" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_05.jpg" alt="" width="240" height="55" />
<img src="../Images/shang3_06.jpg" alt="" width="66" height="55" />
<img src="../Images/shang3_07.jpg" alt="" width="84" height="55" />
<img src="../Images/shang3_08.jpg" alt="" width="72" height="55" />
<img src="../Images/shang3_09.jpg" alt="" width="74" height="55" />
<img src="../Images/shang3_10.jpg" alt="" width="107" height="55" />
<img src="../Images/shang3_11.jpg" alt="" width="62" height="55" />
<img src="../Images/shang3_12.jpg" alt="" width="70" height="55" />
<img src="../Images/shang3_13.jpg" alt="" width="165" height="55" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_14.jpg" alt="" width="940" height="133" />
<br/>
</div>
Что приводит к изображению ниже, к сожалению, я не понимаю, откуда взялось это небольшое пространство. Или почему это тоже не сверху. Почему-то я действительно запутался, откуда эта проблема, и я был бы очень признателен за помощь.
[2]: http://i.imgur.com/SIkB7Hs.png <… этот должен быть немного более ясным, извините за это
редактировать: если найден довольно простой способ исправить это с помощью margin-top. И просто создание класса div для каждой строки. Что, вероятно, не лучший способ пойти.
Комментарии:
1. Я не вижу никакого небольшого пробела o.0 это только я ..?
Ответ №1:
Хорошо, вот несколько вещей.
Во-первых, с такими вопросами, как этот, людям очень помогает отвечать, если вы размещаете свой код в JSFiddle, как это здесь (хотя изображения там не отображаются, потому что они являются относительными URL-адресами).
Кроме того, кажется, что если вы перемещаете изображения влево, вы можете избавиться от интервала:
.HeaderNav img {
float: left;
}
Просто чтобы отметить, я понятия не имею, почему интервал существовал в первую очередь. Еще один совет: вы должны использовать «Проверить элемент» в Chrome или Firebug в Firefox, чтобы взглянуть на элементы и увидеть отступы, поля и т.д. Обычно это делает очевидным, откуда берутся пробелы, хотя в этом случае я ничего не нашел. Перемещение влево было просто идеей, которая, казалось, работала.
Комментарии:
1. Хорошо, я попробую использовать css для ширины и высоты. Но разве это не требует нового класса для каждого изображения? 2. хорошо, извините, что даже не знал этого сайта: я использую img float
2. .HeaderNav img { float: left; } Исправлена проблема, если бы я только знал, почему сейчас. Поскольку я ненавижу поведение, которое само по себе не имеет большого значения.
3. @darkminaz Да, я согласен, что это раздражает не знать. Что касается CSS, если вы создадите правило, которое устанавливает высоту всех изображений равной 55px (
.HeaderNav img { height: 55px; }), оно автоматически установит ширину, чтобы сохранить соотношение изображения одинаковым. Если вам нужна разная ширина, вы можете просто использовать встроенный CSS для изображений —style="width: Xpx;"вместоwidth="X"4. проблема в том, что у меня размеры от 12 пикселей до 500 пикселей. Поэтому я должен создать один для каждого изображения. Но я попробую это позже. Может быть, это просто моя плохая привычка, и в какой-то момент мне это нравится.
Ответ №2:
Вероятно, потому, что ваши <img> все еще объявляются как элементы встроенного уровня. Использовать:
.HeaderNav img {
display: block;
}
Кроме того, вы должны проверить, были ли присвоены элементу изображения поля или отступы. Если вы это сделаете, сбросьте их.
Комментарии:
1. Дисплей: блок добавил еще больше интервалов и поместил каждое изображение в свою строку. но все равно спасибо, возможно, это понадобится позже для чего-то.
Ответ №3:
Кроме того, убедитесь, что ваши отступы и поля равны 0 для html и тела…
итак, попробуйте это:
body, html {
margin: 0;
padding: 0;
}
HTML нельзя использовать сам по себе; с ним должен постоянно работать CSS.
Комментарии:
1. К сожалению, это ничего не изменило, насколько я могу судить. Но спасибо за быструю помощь.
Ответ №4:
Немного запутанный вопрос, я не все понимаю. Но проверьте этот jsFiddle. Это то, что вы имеете в виду?
Также удалите класс HeaderNav из первого изображения.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" />
</div>
Ответ №5:
Тип отображения элемента img по умолчанию, например, inline-block, из-за размера шрифта, поэтому элемент img может иметь пространство в 3 пикселя.
Чтобы решить эту проблему, вы можете использовать приведенный ниже код:
.HeaderNav img {
display: block;
}
или
.HeaderNav img {
float: left;
}
Все они изменят тип отображения элементов img, я рекомендую первый.
Комментарии:
1. Спасибо за понимание того, почему изображения имеют пробел по умолчанию, это как бы объясняет, почему он так себя вел.
2. Это нормально, но я действительно рекомендую использовать display block вместо float left.