Question

我试图在彼此旁边得到两个div。右边有一个固定的宽度，但左边的一个必须能够调整大小。我尝试了多种方法，但没有一种方法符合我的要求：

右边有一个固定宽度
父div具有最大子女的身高（包裹其子女）
左边一个必须调整大小
Html结构必须按此顺序（底部的原因）：

HTML：

<div class="container">
    <div class="variable_width"></div>
    <div class="fixed_width"></div>
</div>

我尝试了绝对定位正确的div并在左边添加了一个边距并且它达到了所有要求，除了父div没有包装最大的孩子（如预期的那样） http://jsfiddle.net/0fxL71xL/3/

.container{max-width:400px;position:relative;}
.variable_width{margin-right:100px;}
.fixed_width{width:100px; position:absolute;right:0;top:0;}

我也尝试使用内嵌块和最大宽度，但是div不会在顶部对齐，我也不知道如何处理空白问题。最重要的是，不会使左侧div调整大小：http://jsfiddle.net/0fxL71xL/4/

.container{max-width:400px;}

.variable_width{max-width:290px; display:inline-block;}
.fixed_width{width:100px; display:inline-block;}

我还在右侧div上尝试了 float ，但它并没有接近我想要的。我得到的最接近的是更改html中的顺序并使用float：右边的div必须正确，但在这种情况下我不能使用@media查询让它显示在左边的div下面时刻。

编辑：虽然paulie_d的答案修复了它，但我更喜欢具有大量浏览器支持的东西

Answer 1

flexbox可以做到这一点。

JSfiddle Demo

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.fixed_width {
  width: 200px;
  background: #bada55;
}
.variable_width {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: plum;
  height: 100px;
}

<div class="container">
  <div class="variable_width"></div>
  <div class="fixed_width"></div>
</div>

Answer 2

.container {
width:100%;
}

.variable_width {
    max-width: 70%;
    display: inline-block;
    background-color:blue;
margin-right: -3px;
}
.fixed_width {
width:100px;
width: 28%;
display: inline-block;
    background-color:red;
vertical-align: top;
}

现在您可以使用此代码。我认为它会工作正常。你可以在可变宽度div类中添加一些内容，并检查它是否正常工作。我检查过它，它确实有效:)。 http://jsfiddle.net/souraj/vaqbsdzk/

Answer 3

经过更多的搜索，我偶然发现了这个有趣的页面，它总结了一些技术，以实现我想要的。它给出了最完整的答案。

固定宽度右栏和可调整大小的内容

3 个答案: