css 一个容器内 一个宽度固定 一个宽度自适应

可以使用 flex 布局实现。

首先，将容器设置为 display: flex，然后将其中一个子元素的宽度设置为固定值，例如 100px，另一个子元素的宽度设置为 flex: 1，表示自动适应剩余宽度。

HTML 代码示例如下：

<div class="container">
  <div class="fixed-width"></div>
  <div class="auto-width"></div>
</div>

CSS 样式示例如下：

.container {
  display: flex;
}
.fixed-width {
  width: 100px;
}
.auto-width {
  flex: 1;
}

相关问题

不用flex的情况下 css 一个容器内 一个宽度固定 一个宽度自适应

使用 float 和 margin 可以实现一个容器内一个宽度固定一个宽度自适应的布局。

HTML 代码示例如下：

<div class="container">
  <div class="fixed-width"></div>
  <div class="auto-width"></div>
</div>

CSS 样式示例如下：

.container {
  overflow: hidden; /* 清除浮动 */
}
.fixed-width {
  float: left;
  width: 100px;
}
.auto-width {
  margin-left: 100px; /* 留出固定宽度 */
}

通过设置固定宽度的元素为浮动元素，并且设置自适应宽度的元素为非浮动元素，给自适应宽度的元素设置左边距来留出固定宽度的空间，从而实现固定宽度和自适应宽度的布局。同时，也要在容器上设置 overflow: hidden，来清除浮动元素对容器高度的影响。

不用flex的情况下 css 一个容器内 一个高度固定 一个高度自适应

使用绝对定位和 padding 可以实现一个容器内一个高度固定一个高度自适应的布局。

HTML 代码示例如下：

<div class="container">
  <div class="fixed-height"></div>
  <div class="auto-height"></div>
</div>

CSS 样式示例如下：

.container {
  position: relative;
}
.fixed-height {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  box-sizing: border-box; /* 包含 padding */
}
.auto-height {
  position: absolute;
  top: 100px; /* 留出固定高度 */
  left: 0;
  width: 100%;
  box-sizing: border-box; /* 包含 padding */
  padding-top: 20px; /* 留出内边距 */
}

通过将固定高度的元素设置为绝对定位，并且设置宽度为 100%、高度为固定值，使用 box-sizing 属性来包含内边距，来固定宽度和高度。同时，将自适应高度的元素也设置为绝对定位，并且设置 top 属性为固定高度的值，留出固定高度的位置，设置 padding-top 属性来留出内边距，从而让自适应高度的元素自适应容器的高度。需要注意的是，这种方法会使元素脱离文档流，可能会对布局产生影响。