У меня есть страница со строкой около 10 img s. Для удобочитаемости HTML я хочу поместить разрыв строки между каждым тегом img, но при этом делает пробелы между изображениями, которых я не хочу. Есть ли что-нибудь, что я могу сделать, кроме перерыва в середине тегов, а не между ними?
Изменить: Вот скриншот того, что у меня есть. Я хотел бы, чтобы изображения позвоночника книги отображались в случайных комбинациях с использованием PHP. Вот почему мне нужны отдельные теги img.
Вы можете использовать CSS. Настройка отображения: блок или поплавок: слева на изображениях вы можете определить свой собственный интервал и форматировать HTML, как хотите, но повлиять на макет таким образом, который может быть или не подходит.
В противном случае вы имеете дело с встроенным контентом, поэтому важно форматирование HTML - так как изображения будут эффективно действовать как слова.
Извините, если он старый, но я нашел решение.
Попробуйте установить font-size на 0. Таким образом, пробелы между изображениями будут иметь ширину 0, а изображения не будут затронуты.
Не знаю, работает ли это во всех браузерах, но я попробовал его с Chromium и некоторыми <li> элементами с display: inline-block;.
Вы можете использовать комментарии.
<img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="..."><!--
--><img src="..." alt="...">
Я бы позаботился о семантике того, что рядом будет рядом изображений.
У вас есть два варианта, не используя приблизительный материал с CSS. Первым вариантом является использование javascript для удаления дочерних элементов из тегов. Более приятным вариантом является использование того факта, что пробелы могут существовать внутри тегов, не имея значения. Например:
<div id="[divContainer_Id]"
><img src="[image1_url]" alt="img1"
/><img src="[image2_url]" alt="img2"
/><img src="[image3_url]" alt="img3"
/><img src="[image4_url]" alt="img4"
/><img src="[image5_url]" alt="img5"
/><img src="[image6_url]" alt="img6"
/></div>
После слишком много исследований, проб и ошибок я нашел способ, который, кажется, работает нормально и не требует вручную вручную устанавливать размер шрифта на дочерние элементы, позволяя мне иметь стандартизованный размер шрифта em в весь документ.
В Firefox это довольно просто, просто установите word-spacing: -1em на родительский элемент. По какой-то причине Chrome игнорирует это (и, насколько я проверял, он игнорирует интервал слов независимо от значения). Таким образом, помимо этого, я добавляю letter-spacing: -.31em родительскому и letter-spacing: normal к детям. Эта доля em является размером пространства ТОЛЬКО, ЕСЛИ ваш размер em стандартизирован. Firefox, в свою очередь, игнорирует отрицательные значения для межстрочного интервала, поэтому он не будет добавлять его к интервалу слов.
Я тестировал это на Firefox 13 (win/ubuntu, 14 на Android), Google Chrome 20 (win/ubuntu), Android Browser на ICS 4.0.4 и IE 9. И у меня возникает соблазн сказать, что это может также работать на Safari, но я действительно не знаю...
Здесь демо http://jsbin.com/acucam
Я слишком поздно (я просто задал вопрос и нашел тонкий в связанном разделе), но я думаю, что display: table-cell; - лучшее решение
<style>
img {display:table-cell;}
</style>
<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">
Единственная проблема заключается в том, что он не будет работать на IE 7 и более ранних версиях, но это исправление с помощью hack
Используйте таблицу стилей CSS для решения этой проблемы, например, следующий код.
[divContainer_Id] img
{
display:block;
float:left;
border:0;
}
Тестирование в Firefox 3.5 Final!
PS. ваш html должен понравиться.
<div id="[divContainer_Id]">
<img src="[image1_url]" alt="img1" />
<img src="[image2_url]" alt="img2" />
<img src="[image3_url]" alt="img3" />
<img src="[image4_url]" alt="img4" />
<img src="[image5_url]" alt="img5" />
<img src="[image6_url]" alt="img6" />
</div>
Есть ли что-нибудь, что я могу сделать, кроме перерыва в середине тегов, а не между ними?
Не совсем. Поскольку <img> являются встроенными элементами, пробелы между этими элементами рассматриваются визуализатором HTML как истинные пробелы в тексте - избыточные пространства (и разрывы строк) будут усечены, но в символьные данные текстового элемента будут вставлены отдельные пробелы.
Позиционирование тегов <img> абсолютно может помешать этому, но я бы посоветовал это сделать, поскольку это означало бы позиционирование каждого изображения вручную с помощью некоторой пиксельной меры, которая может быть большой работой.
Flexbox может легко исправить эту старую проблему:
.image-wrapper {
display: flex;
}
Дополнительная информация о flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Другим решением будет использование нетрадиционных разрывов строк в местах пространств. Это похоже на ответы первой пары, и это альтернативный способ выстраивания элементов. Это также метод оптимизации супер-края, поскольку он заменяет пробелы в вашей разметке возвратами каретки.
<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">
Обратите внимание, что в любом из этих кодов нет пробелов. Места, где обычно используются пробелы в HTML, заменяются возвратами каретки. Он менее подробный, чем использование комментариев и использование пробелов, как рекомендовал Павел де Врие.
Кредит tech.co для этого подхода.
Пробел между элементами помещается только в редактор HTML для визуального форматирования. Вы можете использовать jQuery для удаления пробелов:
$("div#MyImages").each(function () {
var div = $(this);
var children= div.children();
children.detach();
div.empty();
div.append(children);
});
Это отделяет дочерние элементы, очищает пробелы, оставшиеся до добавления дочерних элементов назад.
В отличие от других ответов на этот вопрос, использование этого метода гарантирует сохранение унаследованных значений css display и font-size. Также нет необходимости использовать float и громоздкий clear, который тогда требуется. Конечно, вам нужно будет использовать jQuery.
Лично мне нравится принятый ответ, в котором нет точного способа сделать это, а не с помощью трюка какой-либо формы.
Для меня это раздражающая проблема, из-за которой время от времени вы можете потратить час на то, чтобы выяснить, почему ряд флажков, например, не все правильно выровнены. Следовательно, мне пришлось быстро и быстро проверить, есть ли правило css, которое я не помнил... но кажется нет:(
Что касается следующего наилучшего ответа, использования font-size... для меня это неприятный хак, который позже вас укусит, задаваясь вопросом, почему ваш текст не отображается.
Я обычно много развиваю с PHP, и в случае, когда я создаю сетку флажков, созданный PHP-контент удаляет эту проблему, поскольку он не вставляет никаких интервалов/разрывов.
Просто я предлагаю либо иметь дело с изображениями, которые находятся на одной линии вместе, либо с использованием серверной части script для создания контента/изображений.
Вместо использования для удаления CR/LF между элементами я использую инструкцию обработки SGML, потому что minifiers часто удаляет комментарии, но не XML PI. Когда PHP PI обрабатывается PHP, он имеет дополнительное преимущество для полного удаления PI вместе с CR/LF между ними, таким образом сохраняя не менее 8 байтов. Вы можете использовать любое произвольное допустимое имя команды, например, и сохранить два байта в X (HT) ML.
белое пространство: начальное; Работает для меня.
Семантически говоря, не было бы лучше использовать упорядоченный или неупорядоченный список, а затем правильно его использовать с помощью CSS?
<ul id="[UL_ID]">
<li><img src="[image1_url]" alt="img1" /></li>
<li><img src="[image2_url]" alt="img2" /></li>
<li><img src="[image3_url]" alt="img3" /></li>
<li><img src="[image4_url]" alt="img4" /></li>
<li><img src="[image5_url]" alt="img5" /></li>
<li><img src="[image6_url]" alt="img6" /></li>
</ul>
Используя CSS, вы сможете стилизовать его так, как хотите, и удалить пробелы между книгами.