我正在寻找简单便携的东西。以同样的方式一个 CSS
属性可以很容易地跨文档应用，我正在寻找
在此功能的易用性方面类似。
...隔离修复是首选。
水平：
这只能使用 CSS 来实现。由于您不喜欢 flex 布局解决方案，因此下一个最佳选择是表格布局。
一个简单的 CSS sn-p，您可以放入您的项目（并完成），如下所示：
div.flexh {
display: table; box-sizing: border-box; padding: 0; margin: 0;
}
div.flexh > div {
display: table-cell; width: auto;
box-sizing: border-box; vertical-align: middle;
}
div.flexh > div:first-child {
/* Override your custom styling below */
min-width: 75px; width: 75px; max-width: 75px;
}
div.flexh > div:last-child { width: 100%; }
然后，您可以根据网站要求将特定于网站的样式添加到此基本 CSS 中。比如nowrap等等。
此解决方案的两个明显优势是：
- 你不需要改变你的标记，也不需要用类来装饰所有的孩子。只需将
flexh 类应用到您的父母 div 即可。
需要最少的标记：
<div class="flexh">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
- 您不仅限于三列。您可以根据需要拥有尽可能多的列。第一个将具有固定宽度，最后一个将是灵活的，中间的所有列都将获得基于内容的宽度。
演示小提琴：http://jsfiddle.net/abhitalks/qqq4mq23/
演示片段：
div.flexh {
display: table; box-sizing: border-box; padding: 0; margin: 0;
/* Override your custom styling below */
width: 80%; border: 2px solid black;
border-right: 2px dashed black;
font-size: 1em;
}
div.flexh > div {
display: table-cell; width: auto;
box-sizing: border-box; vertical-align: middle;
/* Override your custom styling below */
background-color: lightgreen; border: 1px solid #ddd;
padding: 15px 5px;
}
div.flexh > div:first-child {
/* Override your custom styling below */
min-width: 75px; width: 75px; max-width: 75px;
background-color: orange;
}
div.flexh > div:last-child {
width: 100%;
/* Override your custom styling below */
background: skyblue;
}
<div class="flexh">
<div>75px Fixed Width</div>
<div>Variable Content Width</div>
<div>Flexible Remaining Width</div>
</div>
<hr/>
<div class="flexh">
<div>75px Fixed Width</div>
<div><img src='//placehold.it/128x48/66c' /></div>
<div>Flexible Remaining Width</div>
</div>
<hr/>
<div class="flexh">
<div>75px Fixed Width</div>
<div>Variable TextWidth</div>
<div>
<img src='//placehold.it/128x48/66c' />
<p>Variable ContentWidth</p>
</div>
<div>Flexible Remaining Width</div>
</div>
垂直：
如果没有flex 布局，这有点难以实现。 表格布局在这里不起作用，主要是因为table-row 不会按照您的用例要求保持固定高度。 table-row 或 table-cell 上的 height 仅表示所需的最小高度。如果空间受限，或内容超出可用空间，则cell 或row 将根据内容增加其高度。
按照这里的规范：http://www.w3.org/TR/CSS21/tables.html#height-layout
'table-row' 元素的盒子的高度在用户计算一次
代理具有可用行中的所有单元格：它是
行的计算“高度”，每个单元格的计算“高度”
行，以及单元格所需的最小高度 (MIN)...
...单元格框的高度是所需的最小高度
内容
这个效果可以看这里：http://jsfiddle.net/abhitalks/6eropud3/
(调整窗格大小，你会看到第一行的高度会增加，因为内容无法适应指定的高度，从而达不到目的)
因此，您可以使用内部标记（如 div 元素）间接限制高度，或者放开表格布局并计算灵活布局的高度。在您的用例中，您不希望更改标记，因此我不建议使用内部标记。
这里最好的办法是使用经过时间考验的普通block-level divs 模型，并计算灵活模型的高度。正如您已经发现 CSS 无法实现的那样，您需要一个小的 JavaScript sn-p 来为您做到这一点。
一个简单的 JavaScript sn-p (no jQuery)，您可以将其包装在 window.load 中并放入您的项目（并完成），如下所示：
var flexv = document.querySelectorAll('div.flexv');
/* iterate the instances on your page */
[].forEach.call(flexv, function(div) {
var children = [].slice.call(div.children), // get all children
flexChild = children.splice(-1, 1), // get the last child
usedHeight = 0, totalHeight = div.offsetHeight;
children.forEach(function(elem) {
usedHeight += elem.offsetHeight; // aggregate the height
});
/* assign the calculated height on the last child */
flexChild[0].style.height = (totalHeight - usedHeight) + 'px';
});
CSS sn-p 或多或少类似于水平的无表格布局，您也可以将其放入项目中并添加额外的特定于站点的样式。所需的最少标记保持不变。
演示小提琴 2：http://jsfiddle.net/abhitalks/Ltcuxdwf/
演示片段：
document.addEventListener("load", flexit);
function flexit(e) {
var flexv = document.querySelectorAll('div.flexv');
[].forEach.call(flexv, function(div) {
var children = [].slice.call(div.children),
flexChild = children.splice(-1, 1),
usedHeight = 0, totalHeight = div.offsetHeight;
children.forEach(function(elem) {
usedHeight += elem.offsetHeight;
});
flexChild[0].style.height = (totalHeight - usedHeight) + 'px';
});
}
div.flexv {
display: inline-table; box-sizing: border-box; padding: 0; margin: 0;
overflow: hidden;
/* Override your custom styling below */
height: 320px; width: 20%; border: 1px solid black; font-size: 1em;
margin: 8px;
}
div.flexv > div {
display: block; height: auto; box-sizing: border-box;
overflow: hidden;
/* Override your custom styling below */
background-color: lightgreen; border: 1px solid #ddd;
padding: 5px 15px;
}
div.flexv > div:first-child {
/* Override your custom styling below */
min-height: 36px; height: 36px; max-height: 36px;
background-color: orange;
}
div.flexv > div:last-child {
height: 100%;
/* Override your custom styling below */
background: skyblue;
}
<div class="flexv">
<div>36px Fixed Height</div>
<div>Variable Content Height</div>
<div>Flexible Remaining Height</div>
</div>
<div class="flexv">
<div>36px Fixed Height</div>
<div><img src='//placehold.it/64x72/66c' /></div>
<div>Flexible Remaining Height</div>
</div>
<div class="flexv">
<div>36px Fixed Height</div>
<div>Variable Text Height</div>
<div>
<img src='//placehold.it/72x48/66c' />
<p>Variable Content Height</p>
</div>
<div>Flexible Remaining Height</div>
</div>
注意：正如@LGSon 所指出的，用于演示的display: inline-table 不能很好地与Firefox 配合使用。这仅用于演示，应根据您的用例替换为 block 或 inline-block。