Question

我在面对固定宽度和中心的div时面临问题。高度并在其内部并排放置两个div。我想要在稍后的时间点实现的是基于某个事件在第二个div（在第一个div的顶部）上向左滑动的效果。以下是我的尝试：

HTML：

<div id="center">
    <div id="firstel"></div>
    <div id="secondel"></div> 
</div>

CSS：

#center{
    position:absolute;
    border:1px solid black;
    width:200px;
    height:100px;
    overflow:hidden;
    top:50%;
    left:50%;
}
#firstel{
    background-color:red;
}
#secondel{
    background-color:blue;
}

#firstel,#secondel{
    position:relative;
    width:200px;
    height:100px;
    display:inline-block;
    float:left;
}

JSFIDDLE：link

感谢任何帮助！

Answer 1

#center{
    position:absolute;
    border:1px solid black;
    width:100%; //change this
    overflow:hidden;
    top:50%;
    left:50%;
}

Demo here

Answer 2

#center和#firstel,#secondel ID的宽度相同（200px），如果需要并排显示，则必须更改ID值

您可以尝试这样做： Demo

#firstel,#secondel{    
    width:50%; /* changed value in % or you can use 100px too as per your need */
    height:100px;
    display:inline-block;
    float:left;
}

Answer 3

如果你想要两个div并排改变div的宽度更改显示小于父div宽度的divs宽度

#firstel,#secondel{
position:relative;
width:100px;
height:100px;
display:inline-block;
float:left;

}

保持div并排在固定宽度的绝对div内。高度

3 个答案: