0

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

单击 jeditable 字段时，它会跳到#content 下方。你可以在这里试试（点击“kala”）：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

4

2 回答 2

2

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

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

可编辑宽度初始化小提琴

于 2013-03-31T18:58:15.290 回答
0

我找到了：我只需要添加

margin-right: 100px;

向左。我昨天晚上都在为此苦苦挣扎，显然我只需要在这里问它：D

于 2013-03-31T18:37:17.447 回答