CSSで一行の中で左寄せと右寄せを使いたい時

webページのデザインで、一行中にある文字列は左寄せ、ある文字列は右寄せにしたい時ってありますよね。少しはまったのでメモとして残しておきます。

inline.html

1
2
3
4
<div class="box">
  <div class="left-content">Hello</div>
  <div class="right-content">World</div>
</div>

inline.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
  width: 100%;
  background-color: yellow;
  display: table;
}

.left-content {
  width: 30%;
  display: table-cell;
}

.right-content {
  width: 70%;
  display: table-cell;
  text-align : right;
}

はい。これで一行中に左寄せでHello,右寄せでworldと表示されます。
親boxはwidth100%を持ち、子は横並びの部分をtable-cellで実現します。
また、子にはwidthを100%になるよう設定してあるので、一行中に収まります。
ただ、例えばHelloの部分が30%を超えるような文字数だった場合、表示が崩れるかもしれません。