1

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

我见过的每个解决方案都使用内联块，但我不能使用内联块行为。当 inline-block 开始换行时，它仍然表现得像块元素，我需要 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>
4

2 回答 2

2

现在习惯了floating

像这样

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

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

于 2012-07-20T04:28:58.897 回答
2

好的，这是我想出的答案（在 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");
    }
})
于 2012-07-20T17:09:28.907 回答