css怎么让两列排布一列固定一列自适应

可以使用 CSS 中的 float 属性和 width 属性来实现这种布局。具体方法如下：

1. 给两列的父容器设置一个固定的宽度，比如说 960px。

2. 给固定列设置一个固定的宽度，比如说 300px，并且设置 float:left。

3. 给自适应列设置一个宽度为自适应，比如说 width: calc(100% - 300px);（注意这里的 300px 就是固定列的宽度），并且设置 float:right。

这样就可以实现一列固定，一列自适应的布局了。完整的 CSS 代码示例如下：

.container {
  width: 960px;
}

.fixed-column {
  width: 300px;
  float: left;
}

.adaptive-column {
  width: calc(100% - 300px);
  float: right;
}

相关问题

css 想让表格固定一列

你可以使用 CSS 中的 position 和 left 属性来固定表格中的某一列。假设你要固定第一列，可以按如下方式设置：

1. 将第一列 td 或 th 的 position 属性设置为 fixed。

td:first-child, th:first-child {
  position: fixed;
  left: 0;
  width: 100px; /* 设置宽度 */
}

2. 将其他列的宽度设置为剩余宽度。可以使用 calc 函数来计算。

td, th {
  width: calc((100% - 100px) / 3); /* 假设表格有4列，第一列宽度为100px */
}

这样就可以将表格中的第一列固定在左侧了。注意，固定列可能会影响到表格的布局，需要根据实际情况进行调整。

css标题在左边独占一列 文字在右边自适应

你可以使用 CSS 的 flex 布局来实现标题在左边独占一列，文字在右边自适应的效果。以下是一个示例代码：

HTML：

<div class="container">
  <h2 class="title">标题</h2>
  <p class="content">这里是文字内容，可以根据实际情况自适应宽度。</p>
</div>

CSS：

.container {
  display: flex;
  align-items: center;
}

.title {
  flex-shrink: 0; /* 不缩小 */
  width: 100px; /* 固定宽度 */
}

.content {
  flex-grow: 1; /* 自适应 */
}

上述代码中，我们使用了 flex 布局，并通过设置 `flex-shrink: 0` 防止标题缩小。标题使用了固定宽度，而文字内容则使用了 `flex-grow: 1` 来自适应宽度。你可以根据实际需求调整宽度值。