Question

我有两个浮动的div，左边的一个有设定宽度，另一个没有。我试图找出的方法是防止它们在容器收缩时堆叠在彼此之上，而是让第二个容器与容器一起收缩。

<style>
.row {
   float:left;
}
.cell {
    float: left;
}
</style>

<div class="row">
    <div class="cell" style="width:50px">a</div>
    <div class="cell">b</div>
</div>

所以在这个例子中，我需要b动态缩小而不包装到下一行。

Answer 1

试试这个，请查看fiddle

＆＃13;

.row {
   float:left;
   width: 100%;
}

.cell {
    float: left;
    height: 100px;        
}

#right-cell {
    float: initial
}

＆＃13;

<div class="row">
    <div class="cell" style="width: 50px">a</div>
    <div class="cell" id="right-cell">sdfsd fsd sdf sd fsdf sdf dsfdsf dsf sdb sdfsd fsd sdf sd fsdf sdf dsfdsf dsf sdb sdfsd fsd sdf sd fsdf sdf dsfdsf dsf sdb sdfsd fsd sdf sd fsdf sdf dsfdsf dsf sdb sdfsd fsd sdf sd fsdf sdf dsfdsf dsf sdb sdfsd fsd sdf sd fsdf sdf dsfdsf dsf sdb</div>
</div>

＆＃13;

这是你想要的吗？

用容器收缩浮动的div并防止它包裹到下一行

1 个答案: