Question

我有两个div。必须在右侧的Div必须具有固定的宽度，并且左侧必须适合自由空间。我无法达到这个效果，但我已经完成了这种情况的对立，当左边的一个是固定的而右边的一个被拉伸时：

HTML：

<div>
    <div class="part left"></div>
    <div class="part right"></div>
</div>

CSS：

.part {
    height: 100px;
}

.left {
    width: 100px;
    float: left;
    background-color: green;
}

.right {
    overflow: hidden;
    background-color: blue;
}

这是example。你能帮我吗？（我想在不使用calc的情况下这样做，因为右边div的宽度可能会改变）

Answer 1

首先使用右浮动div来编辑标记。

<div>
    <div class="part right"></div>
    <div class="part left"></div>
</div>

<强> FIDDLE

CSS（与原作一样）

.part {
    height: 100px;
}

.right {
    width: 100px;
    float: right;
    background-color: green;
}

.left {
    overflow: hidden;
    background-color: blue;
}

Answer 2

我建议你使用flexbox。这正是你所需要的。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Answer 3

这应该这样做。使用绝对定位和填充权限。

code

http://jsfiddle.net/ak8Xb/1/

对齐左侧元素以适应自由空间

3 个答案:

CSS（与原作一样）