Question

我遇到了元素问题。当我在search_groups_wrapper内的任何位置键入任何文本时，右列将落到底部。如果没有文本，则显示为原样。有什么问题？

这是jsfiddle - http://jsfiddle.net/csYU8/有问题。删除'这是一些文字'，元素将移动到顶部。

Answer 1

我找不到导致这种情况的原因，但我找到了解决办法：

只需将以下样式添加到#search_wrapper

即可

top:0;
position:absolute;

<强> CSS

#search_wrapper
{
    height:50px;
    width:100%;
    top:0;
    position:absolute;
}

DEMO

Answer 2

而不是使用display:inline-block，您应该使用float:left属性。并且要清除浮动，您可以在父div上使用clear:left。

或者您仍想使用display: inline-block。

#search_groups_wrapper
{
display:inline-block;
height:100%;
margin:0;
padding:0;
border:0;
width:70%;
position:relative;
top:0;
vertical-align:top; /*I've just added this line*/
}

这是另一个正在运行的演示。 http://jsfiddle.net/kheema/csYU8/7/

#search_groups_wrapper {
    border: 0 none;
    display: inline-block; /*Better Remove this line and add float left*/
    float: left;
    height: 100%;
    margin: 0;
    position: relative;
    top: 0;
    width: 70%;
}

#existing_groups_wrapper {
    border: 0 none;
    display: inline-block; /*Better Remove this line and add float left*/
    float: left;
    height: 100%;
    margin: 0;
    width: 30%;
}

这是一个演示。 http://jsfiddle.net/csYU8/

Answer 3

将align: left添加到您的search_groups_wrapper和existing_groups_wrapper。

FIDDLE DEMO

添加文本时元素向下移动

3 个答案:

DEMO