css两列自动按内容适配宽度

<div class="container">
  <div class="fixed">This is a fixed width column</div>
  <div class="fluid">This is a fluid width column</div>
</div> 

现在，我们需要使用CSS来设置这些列的样式。我们可以使用flexbox布局来让这两列自动适应宽度。对于固定宽度的列，我们可以设置一个固定的宽度，比如说200像素。对于流动宽度的列，我们可以设置flex属性等于1，这样它就会占据剩余的空间：

.container {
  display: flex;
}

.fixed {
  width: 200px;
}

.fluid {
  flex: 1;
} 

这样，我们就完成了两列布局，其中一列是固定宽度，而另一列则会自动适应内容并占据剩余的宽度。这种方法可以用于创建多种不同类型的布局，包括两列、三列、四列等等。

需要注意的是，在某些情况下，flexbox布局可能会带来一些问题，特别是在旧版本的浏览器中。为了确保布局的兼容性和稳定性，我们可以使用其他方法，比如说基于表格的布局或者浮动布局。