Question

我有两个主要的div #left和#right，它们位于另一个#content div中，彼此相邻。 #left包含一个可编辑的字段。 #right漂浮在右边。

单击可编辑字段时，它会跳转到#content下方。你可以在这里试试（点击＆＃34; kala＆＃34;）：http://jsfiddle.net/BuDLC/14/

如果我从#right中移除浮动，则该字段按预期工作，即。输入字段显示在可编辑div的顶部。

HTML：

<div id="content">
   <div id="right">
       right
   </div>
   <div id="left">
       <div class="edit">Kala</div>
    </div>
</div>

CSS：

body {
    background: gray;
    height: 100%;
}

.edit {
    border-bottom-style: dotted;
    border-bottom-color: lightgray;
    border-bottom-width: 1px;
    background: green;
}

.edit form,                                                                                                                        
.edit input {
    margin: inherit;
    padding: inherit;
    font: inherit;
    color: inherit;
    background: inherit;
    border: none;

}

#content {
    width: 300px;
    height: 100px;
}

#right {
   float: right;
   width: 100px;
   background-color: khaki;
}

#left {
     width: auto;
     min-width: 150px;
     background-color: blue;
}

#right, #left {
     height: 100%;   
}

请MTV，皮条客我的HTML / CSS

Answer 1

很高兴你找到了有用的东西。如果您对问题的根本原因感兴趣，那是因为输入框的默认宽度为300px。将宽度为150的宽度传递给可编辑的扩展器可以解决这个问题：

$(".edit").editable("http://x.y.z/some/url", {width : 150} );

Editable width initialisation fiddle

Answer 2

我发现了：我只需要添加

margin-right: 100px;

到#left。我昨天晚上整整都在努力，显然我只需要在这里问：D

当下一个容器向右浮动时，jeditable字段跳出div

2 个答案: