jeditable字段跳出DIV的下一个容器是浮动到右

我有两个主要的div #left和#right其在另一＃内容的div，紧邻彼此。 #left包含可裁剪的字段。 #right在右边漂浮。jeditable字段跳出DIV的下一个容器是浮动到右

当点击jeditable领域，跳＃内容如下。你可以在这里试试（点击“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

来源

2013-03-31 fish

我发现：我只是需要加入

margin-right: 100px;

向左。我挣扎着这整个昨天晚上，显然我只需要在这里问它：d

来源

2013-03-31 18:37:17 fish

高兴你发现一些工作。如果您对问题的根本原因感兴趣，那是因为输入框的默认宽度为300px。在150的宽度与可编辑扩展器通过修复此：

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

Editable width initialisation fiddle

来源

2013-03-31 18:58:15

jeditable字段跳出DIV的下一个容器是浮动到右

回答

相关问题