Неразрывные непробелы в HTML

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

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

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

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

Так как вы все равно используете изображения, почему бы не сгенерировать изображение, представляющее весь макет на лету? Вы можете использовать что-то вроде GD или ImageMagick, чтобы добиться цели.

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

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

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

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

<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;
}

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

{white-space: nowrap;}

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

Что будет иметь наибольший смысл, так это изменить, какое изображение будет отображаться на лету:

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

Используйте символ соединения слов, 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>

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

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

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

Вы можете заменить 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);
}

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

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

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

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

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

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

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

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

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

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