編集:
今日は、Flexboxを使用する必要があります。
古い答え:
わかりました。私はfont-size: 0;
との両方のnot implemented CSS3 feature
回答に賛成していますが、試してみたところ、どちらも実際の解決策ではないことがわかりました。
実際には、強力な副作用のない回避策は1つもありません。
その後 inline-block
、HTML
ソース(JSP
)から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 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コメントを使用して、1つの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>