javascript - 内联(不是内联 block )行为元素的最小宽度

Question

我想在一个 contenteditable div 上设置最小宽度，旁边有一些其他元素必须与 div 保持一致。

我见过的每个解决方案都使用内联 block ，但我不能使用内联 block 行为。当 inline-block 开始换行时，它仍然表现得像 block 元素，我需要 div 表现得像内联元素。我想解决方案需要的不仅仅是 CSS，但似乎很难为 div 的文本更改设置任何事件。欢迎提供涉及 javascript 和/或 jQuery 的解决方案。

编辑:这是我正在尝试做的事情的简化版本。如果用户键入的文本多于页面宽度，则行内 block 和 block 之间的行为会有所不同，这就是我所关心的。

<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

现在习惯于 float

像这样

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

现场演示 http://tinkerbin.com/3Ho3Af9c