Question

请看我的小提琴：http://jsfiddle.net/Waterstraal/bMfbH/2/

HTML：

<div class="row">
    <div class="actionPanel"></div><div class="resultPanel"></div>
</div>

CSS：

.row {
    width:500px;
    height: 50px;
    overflow:hidden;
    border:1px solid #ccc;
}
.resultPanel {
    display:inline-block;
    width:450px;
    height: 50px;
    background: #ddd;
}
.actionPanel {
    display:inline-block;
    width:50px;
    height: 50px;
    background:#eee;
}

我想将结果面板“滑动”到右侧（因此它仍然与actionPanel处于同一级别），而是将其向下推出视图。

在javascript中，actionPanel的宽度变得更大，因此两个元素的总宽度大于父元素的宽度。

有谁知道我怎么能达到我之后的效果？我试过使用浮动元素，但结果相同。我也尝试使用表元素，没有效果。

提前谢谢。

Answer 1

将white-space: nowrap添加到内联块元素的容器中，在本例中为.row。

http://jsfiddle.net/thirtydot/bMfbH/3/

Answer 2

更改css：

body {
padding:10px;
}
.row {
width:500px;
height: 50px;
overflow:hidden;
border:1px solid #ccc;
}
.resultPanel { 
height: 50px; 
background: #ddd; 
}
.actionPanel {
float:left;
width:50px;
height: 50px;
background:#eee;
}

具有溢出的固定宽度容器内的内联块元素：隐藏被下推

2 个答案: