Html 如何使用一个静态列和一个响应列创建网格布局？

我正在尝试创建一个两列布局，左侧有一个固定宽度的列，右侧有一个占用剩余空间的响应列。下面是一个例子：

<div>
  <div style="width:120px"></div>
  <div></div>
</div>

---

我已经做了一段时间了，但我似乎无法让它工作。非常感谢您的帮助。谢谢

表格最好处理网格布局，将表格设置为100%，将左栏的静态宽度设置为300px，右栏将自动填充屏幕宽度

…静态列
…动态列。
入口1
入口234189023452345
入口2
您会注意到表格单元格仅延伸到文本的长度

---

就这么简单

我看到了两个带有此标记的CSS选项：

备选案文2：

div {
display:table;
width:100%;
table-layout:fixed;
border:solid;/* for demo */
}
div div {
display:table-cell;
}
.col1 {
width:120px;
}

---

有一种简单的解决方案，即不使用表格和带有

float

和

margin

的表格样式：

.sidebar { 
    width: 200px; 
    float: left; 
}
.content { 
    margin-left: 200px; 
}

---

示例：

感谢您的回复！这很有效。我想我还是会选择@GCyrillus的版本，因为它保留了divs。谢谢你的回复！这起作用了。我想我会选择你的版本，因为它保留了div。再一次，谢谢！

div {
overflow:hidden;
border:solid;/* for demo */
}
.col1 {
width:120px;
float:left;
}

div {
display:table;
width:100%;
table-layout:fixed;
border:solid;/* for demo */
}
div div {
display:table-cell;
}
.col1 {
width:120px;
}

.sidebar { 
    width: 200px; 
    float: left; 
}
.content { 
    margin-left: 200px; 
}