0

我可以解释这一点的最好方法是使用 JSFiddle 示例：http: //jsfiddle.net/8tXku/

我将每个.projectdiv 浮动到左侧并使用一些简单的 jQuery 使它们在单击时展开以显示描述，但是如果单击第一个项目，它会将第三个项目推到右侧，因为它占用了太多空间扩大。

有没有办法让第三个项目 div 优雅地向下移动带有扩展内容的页面，而不是向右移动？

4

2 回答 2

0

这可能是一个肮脏的解决方案，但它的效果很好。

给.project-descriptionaposition:absolute;将允许它在.slideDown()不影响周围环境的情况下divs，但必须进行一些其他调整。

我添加position:relative;到，.project以便每个.project-description都包含在其中。

最终的 CSS

.project {
    width: 250px;
    float: left;
    border: 1px solid #dedede;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    -moz-box-shadow:    0px 0px 20px rgba(50, 50, 50, 0.4);
    box-shadow:         0px 0px 20px rgba(50, 50, 50, 0.4);
    margin-right: 30px;
    margin-bottom: 30px;
position:relative;
}

.project-description {
    padding: 5px;
    font-size: 12px;
    display: none;
    position:absolute;
    background-color:white;
    left:0;
    right:0;
    z-index:99;
}

看看这个：http: //jsfiddle.net/AliBassam/N4U3R/

更新

当.project-description包含大文本（显然）时，它将隐藏在底部 div 下，只需添加z-index:99;到.project-description

看看这个：http: //jsfiddle.net/AliBassam/pMGDZ/

于 2013-01-28T00:44:47.530 回答
0

用这个替换.project-description当前样式

.project-description {
    padding: 5px;
    font-size: 12px;
    display: none;
    position: absolute;
    -webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.4);
    width:325px;
    border-radius: 0 0 6px 6px;
    background: #FFFFFF;
    z-index: 1;    
}

演示：http: //jsfiddle.net/enve/8tXku/4/

于 2013-01-28T00:48:48.050 回答