內聯（非內聯塊）行為元素的最小寬度

Question

我想在一個contenteditable div上設置min-width，旁邊有一些其他元素必須與div保持內聯。

我見過的每個解決方案都使用內聯塊，但我不能使用內聯塊行為。 當內聯塊開始包裝時，它仍然表現得像塊元素，我需要div表現為內聯元素。 我認為解決方案需要的不僅僅是CSS，但是當div的文本發生變化時，似乎很難設置任何事件。 歡迎使用涉及javascript和/或jQuery的解決方案。

編輯：這是我正在嘗試做的簡化版本。 如果用戶輸入的文本多於頁面寬度，則內聯塊和塊之間的行為會有所不同，這就是我所關注的。

<style type="text/css">
label {
    width: 40px;
    height: 40px;
}
#container {
    font-size: 32px;
}
#content {
    display: inline;
    min-height: 37px; /* doesn't work on inline elements */
    min-width: 80px; /* also doesn't work on inline elements */
}
</style>

<div id="container">
    <input type="radio" />
    <label>
        <span></span>
    </label>
    <span>(A)</span>
    <div id="content" contenteditable="true" unselectable="off">test</div>
</div>

Answer 1

好的，這是我提出的答案（在jQuery中）。 任何人都可以給我一些關於遺漏一些可能不會改變div內容或在div周圍放置邊框的事件的建議嗎？ （我也關注剪切/粘貼）。

$('#content').bind('blur focus load resize scroll click dblclick ' +
        'mousedown mouseup mousemove change ' +
        'select keydown keypress keyup', function () {
    if($(this).width() <= 80) {
        $(this).css("display", "inline-block");
    }
    else {
        $(this).css("display", "inline");
    }
})

Answer 2

現在習慣floating

像這樣

a{
background:green;
  min-height:200px;
  float:left;
}

現場演示http://tinkerbin.com/3Ho3Af9c