غير كسر غير الفضاء في HTML

Question

لدي البولينج تطبيق ويب يسمح مفصلة جدا الإطار حسب الإطار معلومات الدخول.شيء واحد فإنه يسمح تتبع التي دبابيس تم ترسيتها على كل كرة.لعرض هذه المعلومات, أنا جعلها تبدو وكأنها رف من الدبابيس:

o o o o
 o o o
  o o
   o

الصور المستخدمة لتمثيل دبابيس.لذلك ، على الصف الخلفي, لدي 4 img فئة ، ثم br الوسم.يعمل كبيرة...في الغالب.المشكلة في المتصفحات مثل IEMobile.في هذه الحالة, حيث هناك 10 أو 11 الأعمدة في الجدول, و قد يكون هناك صف من الدبابيس في كل عمود ، أي محاولة تقليص حجم العمود لاحتوائه على الشاشة, و أنا في نهاية المطاف مع شيء من هذا القبيل:

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, فإنه لا يفعل ذلك.

أي تلميحات أو اقتراحات ؟ ربما نوعا من في الواقع هذا لا إضافة الفضاء ؟

---

متابعة/ملخص

لقد تلقى وحاولت عدة اقتراحات جيدة ، بما في ذلك:

• حيوي توليد الصورة بالكامل على الخادم.حل جيد, ولكن حقا لا تناسب حاجتي (المستضافة على جي إن) وأكثر قليلا من التعليمات البرمجية مما أريد أن أكتب.هذه الصور يمكن أيضا أن يكون مؤقتا بعد الجيل الأول.
• استخدام CSS white-space الإعلان.جيد المعايير على أساس حل فشل فشلا ذريعا في IEMobile الرأي.

ما انتهى به

توقف رئيس يتمتم شيئا

نعم, هذا صحيح, gif شفافة في الجزء العلوي من شعبة ، الحجم إلى عرض أحتاج.نهاية كود (المبسطة) يبدو مثل:

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

p.s.لا لن تكون روابط مفيدة لشخص آخر واضح دوت في الحل النهائي :)

Answer 1

قد تتمكن من محاولة css "nowrap" الخيار في تحتوي div.

{white-space: nowrap;}

لست متأكدا كيف على نطاق واسع معتمد.

Answer 2

لدي حول هذا النوع من المشكلة في الماضي بشكل حيوي إنشاء الصورة بأكملها (مع دبوس المناسبة الترتيب) كصورة واحدة.إذا كنت تستخدم ASP.NET هذا من السهل جدا القيام به مع GDI المكالمات.أنت فقط حيوي إنشاء صورة مع دبوس موضع ، ثم تعمل على الصفحة كصورة واحدة.يأخذ كل القضايا محاذاة خارج الصورة (يقصد التورية).

Answer 3

لماذا لا يكون صورة عن جميع النتائج الممكنة من أجل المسامير ؟ لا تعبث مع تخطيطات المتصفحات صورة صورة

تولد لهم على الطاير التخزين المؤقت الصور التي تم إنشاؤها لإعادة استخدامها.

Answer 4

ما من شأنه أن يجعل معظم معانيها هو تغيير الصورة التي يتم عرضها على الطاير:

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

Answer 5

منذ كنت تستخدم الصور على أي حال, لماذا لا تولد صورة تمثل تخطيط كله على الطيران ؟ يمكنك استخدام شيء من هذا القبيل GD أو يماغيماغيك أن تفعل خدعة.

Answer 6

إضافة "nowrap" في td الوسم...

Answer 7

منذ كنت تريد الذهاب للحصول على أقصى قدر من التوافق ، هل تعتبر توليد صورة واحدة تمثل الإطار ؟

إذا كنت تستخدم PHP يمكنك استخدام GD بشكل حيوي إنشاء الصور تمثل الإطارات على أساس نفس المدخلات التي سوف تستخدمها لإنشاء HTML في سؤالك.أكبر ميزة هذا المتصفح والتي يمكن عرض PNG أو GIF سوف تكون قادرة على عرض الإطار الخاص بك.

Answer 8

هذا وقد تم هنا لفترة من الوقت, ولكن كنت مجرد الذهاب من خلال هذا وجدت هذا المنصب.بغض النظر عن ما فعلته لا يمكن الحصول على الصور للذهاب في صف واحد.بغض النظر عن ما كانوا التفاف.حاولت كل شيء.

ثم اكتشفت أن هناك وضع على العميل حيث يمكن اختيار عرض 1) عمود واحد, 2) عرض سطح المكتب ، 3) صالح النافذة.وفقا MSDN ، الافتراضي هو من المفترض أن يكون أن يصلح النافذة.ولكن زوجتي أي الهاتف المحمول تعثر على عمود واحد.لذلك لا يهم ما سيكون التفاف كل شيء في عمود واحد.إذا أنا تحولت إلى أي من خيارات 2 بدت جيدة.

حسنا, يمكنك تعيين هذه العلامة الوصفية:

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

سيتم تعيين عرض الصفحة إلى 320px.لا أعرف كيف تجعل من الذهاب إلى السيارات ، إن كان أحد يعرف, الرجاء نشر.

هذا لا يعمل على بلاك بيري قبل v4.6 - كنت عالقا مع عمود واحد إلا إذا كان المستخدم يدويا تغييرات على عرض سطح المكتب.مع 4.6 أو في وقت لاحق التالية من المفترض أن يعمل ولكن أنا لم تختبر:

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

Answer 9

قد تحتاج إلى المساحة الفعلية فور شبه القولون في

Answer 10

محاولة ذلك مع <div> الوسم على نفس الخط كما <td>...</td>

Answer 11

ربما أكون قد أسأت فهم ما كنت بعد ولكن أعتقد أنه يمكنك أن تفعل ما فعلته الشعارات على الخريطة.

الخريطة خلفية البلاط رسمها ثم كل صورة يقال أن تطفو على اليسار و إعطاء بعض مثيرة للاهتمام الهوامش بحيث يتم وضع كما أريد لها أن تكون (عرض المصدر أن ترى كيف يتم ذلك).

Answer 12

استخدام كلمة نجار حرف U+2060 (أي ⁠)

Answer 13

ربما هذا هو مجرد حالة واحدة حيث يمكن استخدام الجداول لفرض تخطيط.ليس الأمثل ، أنا أعلم أنك لست من المفترض أن استخدام الجداول الأشياء التي ليست جدولي, ولكن يمكن أن تفعل شيئا مثل هذا.

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

Answer 14

هل حاولت تعريف عرض العمود ؟ مثل <td width="123px"> أو <td style="width:123px">.وربما أيضا div ؟

Answer 15

• هناك nobr html الوسم ؛ لا أعرف كيف-يؤيد هذا ، على الرغم من.
• هل يمكن استخدام css overflow:visible وعدم كسر المسافات بين العناصر الخاصة بك (الصور), ولكن لا الأخرى بيضاء في html عن هذه الخطوط.

Answer 16

وقد صور منفصلة كل ترتيب ممكن من كل صف.

الذي لا يتطلب أكثر من 30 صورة (16+8+4+2)

Answer 17

يمكنك استبدال img مع فترة استخدام صورة الخلفية مع كل فترة ، اعتمادا على فئة 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>...

(personnaly أعتقد أنه من الأفضل أن يكون 4 خط مع p الوسم بدلا من شعبة واحدة مع 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);
}

Answer 18

فإنه لن يكون من الأسهل إذا فعلت مثل هذا ؟

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