Неразрывное непространство в HTML

https://stackoverflow.com/questions/93171

01-07-2019
|

Вопрос

У меня есть веб-приложение для боулинга, которое позволяет вводить довольно подробную покадровую информацию.Одна вещь, которую он позволяет, — это отслеживать, какие кегли были сбиты на каждом шаре.Чтобы отобразить эту информацию, я сделал ее похожей на стойку с булавками:

o o o o
 o o o
  o o
   o

Изображения используются для представления контактов.Итак, для заднего ряда у меня есть 4 тега img, а затем тег br.Прекрасно работает...по большей части.Проблема в маленьких браузерах, таких как IEMobile.В этом случае, когда в таблице может быть 10 или 11 столбцов и в каждом столбце может быть стойка контактов, IE попытается уменьшить размер столбца, чтобы он поместился на экране, и в итоге я получу что-то вроде этого :

o o o
  o
o o o
 o o
  o

или

o o
o o
o o
 o
o o
 o

Структура:

<tr>
    <td>
        <!-- some whitespace -->
        <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
        <!-- some whitespace -->
    </td>
</tr>

Внутри внутреннего div нет пробелов.Если вы посмотрите на эта страница в обычном браузере должно отображаться нормально.Если посмотреть в IEMobile, то нет.

Есть какие-нибудь подсказки или предложения?Может быть, какой-тоэто на самом деле не добавляет пробела?

Продолжение/Резюме

Я получил и опробовал несколько хороших предложений, в том числе:

Динамически генерировать все изображение на сервере.Хорошее решение, но оно не совсем соответствует моим потребностям (размещено на GAE), и кода немного больше, чем мне хотелось бы написать.Эти изображения также могут быть кэшированы после первого поколения.
Используйте объявление пробелов CSS.Хорошее решение, основанное на стандартах, с треском проваливается в представлении IEMobile.

Что я в итоге сделал

опускает голову и что-то бормочет

Да, верно, прозрачный gif в верхней части div, размер которого соответствует нужной мне ширине.Конечный код (упрощенный) выглядит так:

<table class="game">
    <tr class="analysis leave">
        <!-- ... -->
        <td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
        <!-- ... -->
    </tr>
</table>

И CSS:

div.smallpins {
    background: url(/img/lane.gif) repeat;
    text-align: center;
    padding:0;
    white-space: nowrap;
}
div.smallpins img {
    width:1em;
    height:1em;
}
div.smallpins img.spacer {
    width:4.5em;
    height:0px;
}
table.game tr.leave td{
    padding:0;
    margin:0;
}
table.game tr.leave .smallpins {
    min-width:4em;
    white-space: nowrap;
    background: none;
}

п.с.Нет, я не буду использовать хотлинкинг чужой четкой точки в своем окончательном решении :)

Решение

Вы можете попробовать опцию CSS «nowrap» в содержащем div.

{white-space: nowrap;}

Не уверен, насколько широко это поддерживается.

Другие советы

Раньше я решал проблемы такого типа, динамически создавая все изображение (с соответствующим расположением контактов) как одно изображение.Если вы используете ASP.NET, это довольно легко сделать с помощью вызовов GDI.Вы просто динамически создаете изображение с размещением булавок, а затем размещаете его на странице как одно изображение.Убирает все проблемы с выравниванием (каламбур).

Почему бы не иметь изображение всех возможных результатов для булавок?Никакой возни с макетами для браузеров: изображение есть изображение

Создавайте их на лету, кэшируя созданные изображения для повторного использования.

Наиболее разумным будет изменение изображения, отображаемого на лету:

<div id="pin-images">
    <img src="fivepins.jpg" />
    <img src="fourpins.jpg" />
    <img src="threepins.jpg" />
    <img src="twopins.jpg" />
    <img src="onepin.jpg" />
</div>

Поскольку вы все равно используете изображения, почему бы не сгенерировать изображение, представляющее весь макет, на лету?Вы можете использовать что-то вроде ГД или ИзображениеМагия чтобы сделать трюк.

Добавьте «nowrap» в тег td...

Поскольку вы стремитесь к максимальной совместимости, рассматривали ли вы возможность создания одного изображения, представляющего кадр?

Если вы используете PHP, вы можете использовать GD для динамического создания изображений, представляющих кадры, на основе тех же входных данных, которые вы использовали бы для создания HTML в своем вопросе.Самым большим преимуществом этого является то, что любой браузер, который может отображать PNG или GIF, сможет отобразить ваш фрейм.

Это было здесь некоторое время, но я только просматривал это и нашел этот пост.Что бы я ни делал, мне не удавалось заставить изображения идти подряд.Несмотря ни на что, они завернутся.Я попробовал все.

Затем я понял, что в клиенте есть настройка, в которой они могут выбрать вид: 1) «Один столбец», 2) «Просмотр рабочего стола» и 3) «Подогнать окно».Согласно MSDN, значение по умолчанию должно соответствовать размеру окна.Но на мобильном телефоне моей жены IE по умолчанию использовался один столбец.ТАК НЕ ВАЖНО ЧТО, все будет помещено в один столбец.Если бы я переключился на любой из двух других вариантов, все выглядело бы нормально.

Ну, вы можете установить это с помощью метатега:

<meta name="MobileOptimized" content="320">

установит ширину страницы 320 пикселей.Не знаю, как включить авто, если кто знает, напишите.

Это НЕ работает на Blackberry до версии 4.6 — вы застряли в одном столбце, если пользователь вручную не перейдет в режим рабочего стола.В версии 4.6 или более поздней версии должно работать следующее, но я не проверял:

<meta name="viewport" content="width=320">

Вам может понадобиться фактическое пространство сразу после точки с запятой в

Попробуйте это с <div> тег в той же строке, что и <td>...</td>

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

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

Используйте символ соединения слова U+2060 (т.е. ⁠)

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

<table>
<tr>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;></td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Вы пытались определить ширину столбца?Нравиться <td width="123px"> или <td style="width:123px">.А может быть, еще и для div?

Вот нобр HTML-тег;не уверен, насколько хорошо это поддерживается.
Вы можете использовать CSS переполнение: видимое и неразрывные пробелы между вашими элементами (изображениями), но никаких других пробелов в HTML для этих строк.

Имейте отдельные изображения для каждой возможной компоновки. каждого ряда.

Для этого потребуется всего 30 изображений (16+8+4+2).

Вы можете заменить img на span и использовать фоновое изображение для каждого интервала, в зависимости от класса CSS:

<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...

(лично я считаю, что лучше иметь 4 строки с тегом p вместо одного div с br)

В CSS вы можете иметь что-то вроде этого:

p.smallpins {
    margin: 0;
    padding: 0;
    height: 11px;
    font-size: 1px;
}
p.smallpins span {
    width: 11px;
    background-image: url(nopinsmall.gif);
    background-repeat: ...
    background-position: ...
}
p.smallpins span.pin {
    background-image: url(pinsmall.gif);
}

Не проще ли было бы сделать это вот так?

<div id="container">
  <div id="row1">
    <img/><img/><img/><img/>
  </div>
  <div id="row2">
    <img/><img/><img/>
  </div>
  <div id="row3">
    <img/><img/>
  </div>
  <div id="row4">
    <img/>
  </div>
</div>

Каким образом ваш CSS будет обрабатывать выравнивание?

.container div{
  text-align:center;
}

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow