使用CSS和两个内联块（或其他）DIV标签而不是使用表格可以实现这样的事情吗？
表格版本是这样的（添加边框以便您可以看到它）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>
它会生成一个具有“固定宽度”（不是百分比宽度）的左列，以及一个扩展以填充该行上的“剩余空间”的右列。听起来很简单，对吧？此外，由于没有任何东西“浮动”，因此父容器的高度会正确扩展以包含内容的高度。 --开始咆哮--
我已经看到了具有固定宽度侧列的多列布局的“明确修复”和“圣杯”实现，它们很糟糕而且很复杂。它们反转元素的顺序，使用百分比宽度，或者使用浮动、负边距，并且“左”、“右”和“边距”属性之间的关系很复杂。此外，布局对子像素敏感，因此即使添加单个像素的边框、填充或边距也会破坏整个布局，并将整个列换行到下一行。例如，即使您尝试做一些简单的事情（例如将 4 个元素放在一行上，每个元素的宽度设置为 25%），舍入误差也是一个问题。
--结束咆哮--
我尝试过使用“inline-block”和“white-space:nowrap;”，但问题是我无法让第二个元素填充线上的remaining空间。将宽度设置为“width:100%-(LeftColumWidth)px”在某些情况下会起作用，但实际上并不支持在宽度属性中执行计算。
参见：
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: 20px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>为什么我在
margin-left: 100pxoverflow: hidden 替换为
.right
.container {
display: flex;
}
.container > div {
border: 1px solid black;
height: 10px;
}
.left {
width: 100px;
}
.right {
width: 100%;
background-color:#ddd;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>.lineContainer {
display:table;
border-collapse:collapse;
width:100%;
}
.lineContainer div {
display:table-cell;
border:1px solid black;
height:10px;
}
.left {
width:100px;
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>您可以在流体元素上使用 calc (100% - 100px)，并为这两个元素使用 display:inline-block。
overflow: hidden）或者如果你不喜欢 CSS hacks/workarounds，你可以使用 JavaScript 来代替。请注意，它可能无法正常工作，因为它是 JavaScript。
var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}
.lineContainer {
width: 100% border: 1px solid #000;
font-size: 0px;
/* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}
.lineContainer div {
height: 10px;
display: inline-block;
}
.left {
width: 100px;
background: red
}
.right {
background: blue
}<div class="lineContainer">
<div class="left"></div>
<div class="right"></div>
</div>
Array.from(document.querySelectorAll(".right")).forEach((el) => {
el.style.width = `calc(100% - ${el.offsetLeft + 1}px)`;
});
.container {
outline: 1px solid black;
}
.left {
outline: 1px solid red;
}
.right {
outline: 1px solid green;
}<div class="container">
<span class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique aliquet quam, at commodo lorem fringilla quis.</span>
<input class="right" type="text" />
</div>使用网格布局和分数单位（fr）的解决方案：
/* For debugging and visibility */
html, body {
border: 2px solid navy;
}
.grid-layout {
border: thick solid sandybrown;
background-color: gray;
}
.grid-layout div:nth-child(odd) {
border: 2px solid brown;
background-color: azure;
}
.grid-layout div:nth-child(even) {
border: 2px solid red;
background-color: lightyellow;
}
/* Grid layout.
* Horizontal and vertical gaps.
* two columns, fixed and responsive.
* Note no containing div per line.
*/
.grid-layout {
display: grid;
gap: 4px 2px ;
grid-template-columns: 100px 1fr;
}
<p>How to make an element fill the remainder of the line?</p>
<p>Note no encompassing div per line.</p>
<div class="grid-layout">
<div>Lorem ipsum line 1</div>
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</div>
<div>Lorem ipsum line 2</div>
<div>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</div>
</div>
.lineContainer {
display: grid;
gap: 2px 4px;
grid-template-columns: 100px 1fr;
}
<p>Display grid per line.</p>
<div class="lineContainer">
<div style="border:1px solid black; ">
Lorem ipsum …
</div>
<div style="border:1px solid black; ">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</div>
</div>哇，flex 没有像样的答案。就这样吧