display: inline-block とwidth: 50%ずつ指定による回り込み回避方法

Question

私はよくinline-blockとwidthパーセント指定を組み合わせて使うのですが、ちょうど１００％にしても回り込んでしまいます。

原因は
https://lealog.hateblo.jp/entry/2012/08/13/232428
にもあるように、htmlの改行が原因みたいです。
解決策として

• 改行にコメントをつけて間をなくす
• そもそも一行にする

等があるみたいですが、どちらもデザイン的に好きではありません。
もっとスマートに解決する方法はないでしょうか？
もしない場合は上と下のどちらの方法が良いと思いますか？

Comments

[yambejp]

再現性を確認するためにもソースを提示してください

[s8_chu]

「デザイン的に」という箇所がよくわからないのですが、どのような点が好ましくないと感じるのか、もう少し詳しく教えていただけませんか？

[_Victorique__]

好ましくないというか好きではないです。
</div><!--
--><div>
って気持ち悪くないですか？

[yambejp]

divをinline-blockにして改行マークの分幅があふれるという話ですかね？
もしそうなら書き方が悪いだけなのですが、仮にそれを優先するとしても
いずれにしろソースが提示できないなら適切な対応策はだせないです

[_Victorique__]

そうです。inline-blockと%指定が悪いんですか？それともそれ以外で悪い書き方をしているということでしょうか？

[s8_chu]

「CSS で行うべき見た目の装飾に関する問題を、HTML の機能を使って解決しようとしている」というところに気持ち悪さを感じているのでしょうか？

[_Victorique__]

おそらくそうだと思います。

[s8_chu]

このような記述( https://codepen.io/anon/pen/mvyGVZ )でも気持ち悪さを感じますか？また、もし気持ち悪さを感じた場合、どのような気持ち悪さか、教えていただけませんか？

[_Victorique__]

全然気持ち悪くないですね。
やはりhtmlで解決しようとしている点に気持ち悪さを感じているみたいです。
まあbootstrap使えって話なのでしょうが

Answer 1

HTMLの基本中の基本ですが、「改行マーク」は半角スペースと同等です。

<style>
.per40{display:inline-block;width:40%;}
.per50{display:inline-block;width:50%;}
.yellow{background-Color:yellow;}
.lime{background-Color:lime;}
.flex{display: -webkit-flex;display:flex;}
</style>


(1)1行表示
<hr>
<div class="per50 yellow">per50</div><div class="per50 lime">per50</div>
<hr>
(2)改行を回避
<hr>
<div class="per50 yellow">per50</div><!--
--><div class="per50 lime">per50</div>
<hr>
(3)何もしない
<hr>
<div class="per50 yellow">per50</div>
<div class="per50 lime">per50</div>
<hr>
(4)何もしない40%
<hr>
<div class="per40 yellow">per40</div>
<div class="per40 lime">per40</div>
<hr>
(5)Flex
<hr>
<div class="flex">
<div class="per50 yellow flex">per50</div>
<div class="per50 lime flex">per50</div>
</div>

(1)や(2)については理解されているようですが、なにもしなければ(3)のように
桁あふれになります。
これは(4)を見ればわかるように改行マークが半角スペースと同じように幅を
持っているからです。
つまり50%+50%+改行マークの幅>100%なのですからあふれるのは自明です。

この手の処理をどうしてもしたいなら(5)のようなflexなタグで囲んでください

Answer 2

grid、もしくはflexboxあたりを使ってみては？

以下flexboxの例です。

<ul>
  <li>1</li>
  <li>2</li>
</ul>

ul {
  display: flex;
}

li {
  width: 50%;
}