HTML에서 깨지지 않는 비공백
https://stackoverflow.com/questions/93171
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 매우 상세한 프레임별 정보 입력을 허용하는 볼링 웹 애플리케이션을 가지고 있습니다.그것이 허용하는 한 가지는 각 공에서 어떤 핀이 쓰러졌는지 추적하는 것입니다.이 정보를 표시하기 위해 핀 랙처럼 보이게 만듭니다.
o o o o o o o o o o
이미지는 핀을 나타내는 데 사용됩니다.따라서 뒷줄에는 img 태그 4개와 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에서 호스팅됨)에 실제로 맞지 않으며 작성하려는 것보다 코드가 조금 더 많습니다.이러한 이미지는 1세대 이후에도 캐시될 수 있습니다.
- CSS 공백 선언을 사용하세요.좋은 표준 기반 솔루션은 IEMobile 보기에서 비참하게 실패합니다.
결국 내가 한 일은
고개를 숙이고 뭔가를 중얼거린다
예, 맞습니다. 필요한 너비에 맞게 크기가 조정된 div 상단의 투명한 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;
}
추신.아니요, 최종 솔루션에서 다른 사람의 명확한 점을 핫링크하지 않을 것입니다. :)
해결책
포함된 div에서 CSS "nowrap" 옵션을 사용해 볼 수 있습니다.
{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>
td 태그에 "nowrap"을 추가하세요...
호환성을 최대화하려고 하므로 프레임을 나타내는 단일 이미지 생성을 고려해 보셨나요?
PHP를 사용하는 경우 GD를 사용하여 질문의 HTML을 생성하는 데 사용하는 것과 동일한 입력을 기반으로 프레임을 나타내는 이미지를 동적으로 생성할 수 있습니다.이 작업의 가장 큰 장점은 PNG 또는 GIF를 표시할 수 있는 모든 브라우저에서 프레임을 표시할 수 있다는 것입니다.
이것은 한동안 여기에 있었지만 방금 이 과정을 거치다가 이 게시물을 발견했습니다.아무리 해도 이미지가 연속으로 나올 수 없었습니다.무슨 일이 있어도 포장할 것입니다.나는 모든 것을 시도했다.
그러다가 클라이언트에 1) 단일 열, 2) 데스크톱 보기, 3) 창 맞춤 보기를 선택할 수 있는 설정이 있다는 것을 알게 되었습니다.MSDN에 따르면 기본값은 창에 맞춰야 합니다.하지만 내 아내의 IE 휴대폰은 기본적으로 단일 열로 설정되어 있었습니다.그래서 무슨 일이 있어도 모든 것을 단일 열로 묶을 것입니다.다른 2가지 옵션 중 하나로 전환하면 괜찮아 보였습니다.
음, 메타 태그를 사용하여 이를 설정할 수 있습니다.
<meta name="MobileOptimized" content="320">
페이지 너비를 320px로 설정합니다.자동으로 설정하는 방법을 모르시는 분 계시면 댓글 부탁드립니다.
이는 v4.6 이전의 Blackberry에서는 작동하지 않습니다. 사용자가 수동으로 데스크탑 보기로 변경하지 않는 한 단일 열에 갇히게 됩니다.4.6 이상에서는 다음이 작동할 것으로 예상되지만 테스트하지는 않았습니다.
<meta name="viewport" content="width=320">
세미콜론 바로 뒤에 실제 공백이 필요할 수도 있습니다.
사용해 보세요. <div> 같은 줄에 태그를 지정하세요. <td>...</td>
나는 당신이 무엇을 하려는지 오해했을지도 모르지만 당신도 내가 한 일을 할 수 있다고 생각합니다 지도의 로고용.
지도 배경 타일이 그려진 다음 각 이미지가 왼쪽으로 떠다니도록 지시하고 몇 가지 흥미로운 여백을 제공하여 내가 원하는 대로 배치되도록 합니다(어떻게 완료되었는지 보려면 소스를 확인하세요).
소목 문자 U+2060(예: ⁠)
아마도 이는 테이블을 사용하여 레이아웃을 적용할 수 있는 한 가지 사례일 것입니다.이는 최적이 아니며 테이블 형식이 아닌 작업에 테이블을 사용하면 안 된다는 것을 알고 있지만 이와 같은 작업을 수행할 수는 있습니다.
<table>
<tr>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> ></td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
열의 너비를 정의하려고 했습니까?좋다 <td width="123px"> 또는 <td style="width:123px">.그리고 어쩌면 div에도 적용되나요?
- 거기에 노브 HTML 태그;하지만 이것이 얼마나 잘 지원되는지는 확실하지 않습니다.
- CSS를 사용할 수 있습니다 오버플로:표시 요소(이미지) 사이에 줄바꿈 없는 공백이 있어야 하지만 해당 줄에 대한 HTML의 다른 공백은 없어야 합니다.
가능한 모든 배열에 대해 별도의 이미지를 갖습니다. 각 행의.
30개의 이미지(16+8+4+2)만 필요합니다.
CSS 클래스에 따라 img를 범위로 바꾸고 각 범위에 배경 이미지를 사용할 수 있습니다.
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
(개인적으로는 br이 있는 단일 div 대신 p 태그가 있는 4줄이 더 낫다고 생각합니다)
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;
}
