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

【问题标题】：Fixed width right bar and resizable content固定宽度的右栏和可调整大小的内容
【发布时间】：2015-12-22 06:33:15
【问题描述】：

我试图让两个 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;}

我也尝试使用 inline-block 和 max-width，但是 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中的顺序并在必须向右的div上使用float：right，但在这种情况下，我不能使用@media查询让它在某个时刻显示在左div下方。

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

【问题讨论】：

标签： html css resize

【解决方案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>

【讨论】：

@Pepe 不在 IE9 或更早版本中

【解决方案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/

【讨论】：

你试过减少div的内容吗？我已经检查过了，它工作正常。左 div 的宽度根据内容而变化，而右 div 的宽度是固定的。
不是根据内容，是根据屏幕宽度。无论哪种情况，右侧 div 都没有固定宽度（您声明了 width:28%;}

【解决方案3】：

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

http://clubmate.fi/100-percent-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems/

【讨论】：