div的高度宽度自适应，内容自适应css3 如何实现

要让 `div` 的高度宽度自适应，可以使用 CSS3 中的 `flexbox` 布局或 `grid` 布局。其中，`flexbox` 布局比较常用。

下面是一个简单的例子，实现了 `div` 的高度和宽度自适应，并且内容也自适应：

<div class="container">
  <div class="content">
    <!-- 这里是内容 -->
  </div>
</div>

.container {
  display: flex;
  /* 设置水平方向和垂直方向都居中 */
  justify-content: center;
  align-items: center;
}

.content {
  /* 设置内容自适应 */
  flex: 1;
}

在上面的例子中，父元素 `.container` 使用了 `flexbox` 布局，并且设置了水平和垂直方向都居中。子元素 `.content` 设置了 `flex: 1;`，表示让其自适应剩余空间。这样，无论 `.container` 的大小如何，都能保证 `.content` 元素的高度和宽度自适应。

相关问题

div宽度自适应文字

在网页布局中，让`div`元素的宽度自适应内容并调整到适合的文字大小通常涉及到CSS技术。你可以通过设置`display`属性为`inline-block`或`flexbox`来实现这个效果。这里是一个基本的例子：

div {
  display: inline-block; /* 或者 display: flex; (如果需要其他方向布局) */
  white-space: nowrap;   /* 防止单词换行 */
  overflow-wrap: break-word; /* 如果文字超出容器，允许折行 */
  max-width: 100%; /* 设置最大宽度以适应屏幕 */
  width: -webkit-fit-content; /* 适用于WebKit浏览器 */
  width: fit-content; /* 标准CSS3，更好的跨浏览器支持 */
}

/* 可选的，如果你想要基于屏幕宽度动态调整 */
@media screen and (min-width: 600px) {
  div {
    max-width: 80%;
  }
}

在这个例子中，`div`的内容会自动调整宽度以适应其内容长度，并保持在可视区域内的可见部分。随着屏幕尺寸的变化，你可以添加媒体查询来自适应不同的设备。