Question

我希望蓝色div（如下面的小提琴所示）位于红色div的右侧。相反，它在下面。如果我将父级设置为overflow: hidden，则它仍然位于下方并隐藏它。

编辑：在简化代码时，我在文本div上遗漏了display: table。我已在此处添加： http://jsfiddle.net/z1385n05/3/

http://jsfiddle.net/z1385n05/1/（overflow: hidden）

HTML：

<div class="outer">
    <div class="parent">
        <div class="child1">1</div>
        <div class="child2"><span>Child 2 is longer than the edge, I don't want it to wrap</span></div>
    </div>
</div>

CSS：

.outer
{
    position: relative;
    width: 320px;
    height: 480px;
    border: solid 1px #cccccc;
}

.parent
{
    position: absolute;
    top: 100px;
    left: 150px;
    height: 20px;
    overflow: visible;
}

.child1
{
    position: relative;
    width: 30px;
    height: 100%;
    float: left;
    background-color: red;
}

.child2
{
    position: relative;
    height: 100%;
    float: left;
    background-color: blue;
    white-space: nowrap;
    overflow: hidden;
    display: table;
}

.child span
{
    position: relative;
    width: 100%;
    vertical-align: bottom;
    display: table-cell;
}

Answer 1

在您更新了问题后，如果您设置了父display:table和.child2 display:table-cell

，则可以实现此目的

.parent
{
    position: absolute;
    top: 100px;
    left: 150px;
    height: 20px;
    overflow: hidden;
    display:table;/*Add this*/
}

.child2
{
    position: relative;
    height: 100%;
    background-color: blue;
    white-space: nowrap;
    display: table-cell;/*Add this*/
    overflow: hidden;
}

fiddle

Answer 2

蓝色方框浮动在红色框下面的原因是因为没有足够的水平空间可以并排放置。

要解决这个问题，有两种解决方案：

1）增加.outer的宽度，直到盒子并排

例如：

.outer
{
    position: relative;
    width: 620px;
    height: 480px;
    border: solid 1px #cccccc;
}

或者

2）增加.parent的宽度，直到框并排

例如：

.parent
{
    position: absolute;
    top: 100px;
    left: 150px;
    height: 20px;
    overflow: visible;
    width: 620px;
}

Answer 3

您的外部div太小，无法包装文本。

试试这个，增加宽度，在你发布的jsfiddle上测试：

.outer
{
    position: relative;
    width: 620px;
    height: 480px;
    border: solid 1px #cccccc;
}

干杯!!

如何强制父div水平拉伸以容纳浮动的子div？

3 个答案: