需要的CSS幫助迫使單行

考慮下面的HTML元素...需要的CSS幫助迫使單行

<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出現在單行？如果它溢出了邊界，我希望剪輯中間的div。

.tester { width: 300px; overflow: auto; background-color: #c5c5c5; } 
    .tester > div { float: left; overflow: hidden; } 
     .tester > div:last-child { float: right; width: 50px; }

Fiddle

* UPDATE *

澄清我想保持寬度300像素，如果超過它的邊框中間的元素應該夾。第一個元素的邊界框由其大小決定。最後一個元素的邊框被設置爲50px。所以中間的元素應該剪輯。

來源

2013-03-04 John Livermore

中間的div必須具有指定的大小有一個溢出邊界（應該隱藏）。 – Michael 2013-03-04 19:40:55

不可能只用CSS - 除非你使用百分比來設置寬度，但是如果你想讓第一個div的內容定義第二個的寬度，那麼你將需要使用javascript ...是一個問題嗎？ – 2013-03-04 19:49:07

澄清之後：我認爲如果第二個div沒有指定的寬度，它總是會浮動到上邊界邊界框（=下一行）內所需的空間，並且不會裁剪。 – Michael 2013-03-04 19:49:55

使用內嵌式地顯示，這裏有一個小演示：

Demo

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>c</div> 
</div>

CSS：

.tester div { 
    display:inline; 
}

而結果：

一個ABCD EFGH IJKL MNOP QRST ABCD EFGH IJKL MNOP QRST ABCD EFGH IJKL MNOP QRST ABCD EFGH IJKL MNOP QRSTÇ

來源

2013-03-04 19:39:43

我不明白這是如何處理防止中間div溢出的問題。 – 2013-03-04 20:04:46

使用display屬性

display: inline-block;

來源

2013-03-04 19:34:56

似乎沒有幫助。你有一個例子嗎？ – 2013-03-04 19:38:39

需要的CSS幫助迫使單行

回答

相關問題