편집하다:
오늘은 Flexbox 만 사용해야 합니다 .
오래된 답변 :
좋아, 대답 font-size: 0;
과 not implemented CSS3 feature
대답을 모두 상향 조정했지만 시도한 후에 그들 중 어느 것도 실제 해결책이 아니라는 것을 알았습니다 .
실제로 부작용이 없으면 해결 방법이 하나도 없습니다.
그런 다음 소스 ( ) 에서 div 사이 의 공백을 제거하기로 결정했습니다 ( ).inline-block
HTML
JSP
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
이에
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
그것은 추악하지만 작동합니다.
그러나, 잠깐 ... 내가 안에 내 div가 발생하고있어 경우 어떻게 Taglibs loops
( Struts2
, JSTL
, 등 ...)?
예를 들면 다음과 같습니다.
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:push>
</s:iterator>
</s:iterator>
모든 것을 인라인하는 것은 절대 생각할 수 없습니다.
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:push></s:iterator>
</s:iterator>
읽을 수없고, 관리하기 어렵고 이해하기 어려운 등
내가 찾은 해결책 :
HTML 주석을 사용하여 한 div의 끝을 다음 div의 시작에 연결하십시오!
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:push><!--
--></s:iterator>
</s:iterator>
이렇게하면 읽기 쉽고 올바르게 들여 쓰기 된 코드를 갖게됩니다.
그리고 긍정적 인 부작용으로 HTML source
, 비록 빈 의견에 의해 감염 되었음에도 불구하고 올바르게 들여 쓰기 될 것이다.
첫 번째 예를 보자. 내 겸손한 견해로는 다음과 같습니다.
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
이것보다 낫다 :
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>