次の HTML を考えると...
<div class="tester">
<div>a</div>
<div>abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst </div>
<div>c</div>
</div>
この css を変更して、上記の 3 つの div を 1 行に表示するにはどうすればよいですか? 境界をオーバーフローした場合にクリップしたい中央の div。
.tester { width: 300px; overflow: auto; background-color: #c5c5c5; }
.tester > div { float: left; overflow: hidden; }
.tester > div:last-child { float: right; width: 50px; }
* アップデート *
明確化 幅を 300px に保ちたいのですが、境界ボックスを超えると中央の要素がクリップされます。最初の要素の境界ボックスは、そのサイズによって決まります。最後の要素の境界ボックスは 50px に設定されています。したがって、中央の要素はクリップする必要があります。