css - 親の幅を無視して、各要素の隣にフロート要素を配置しますか?

Question

以前にこの問題に出くわしたことがありますが、質問の名前を思い出せず、関連する解決策が見つからないため、ここでもう一度説明します。

左に 2 つのボックスをフロートする必要があります。これらのボックスには、親と同じ幅の静的な幅があります。親の幅が十分でないため、ボックスが浮いているのではなく、互いの下に積み重なっています。

ここに私が欲しいものの（大まかな）図があります：

http://i.imgur.com/oHqsH.jpg

何か案は？

Answer 1

メソッドを機能させるwhite-space: nowrapには、親アイテムと子アイテムの間に。を含むコンテナが必要ですposition: absolute;。子アイテムが必要にposition: relative;なり、一番上の親に高さを割り当てる必要があります。

http://jsfiddle.net/79LWk/3/

Answer 2

私の知る限り、これを「きれいに」行う唯一の方法は、次の構造にすることです。

.window
  .parent
    .child
    .child

親のwidthはそのすべての子の合計ですwindowが、幅は 1 つの子の幅です。

Answer 3

white-space: nowrapとともに使用してコードを更新しましたdisplay: inline-block。本当に でそれを行う必要がある場合はfloat: left、@Kurt が提案したことを実行してください。inline-blockしかし、私はここで正しいアプローチだと本当に信じています。

フィドルを確認するか、ここのコードを見てください。

.parent {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
}

.child {
    display: inline-block;
    width: 200px;
    font-size: 1rem;
}