1. 首页
  2. 问题列表
  3. HTML/CSS使Div适合内容，除非屏幕很小
提问者：小点点

HTML/CSS使Div适合内容，除非屏幕很小


我如何设置HTML/CSS，使我的DIV跟随屏幕大小的宽度，但一旦它适合内容就停止扩展（当DIV不能完全包含内容时，它应该向左/向右滚动）。

伪代码:

HTML:

<div class="image-container">
  <img width="1000">
</div>

CSS:

.image-container {
  /* ??? */
  display: inline-block; /* ??? */
  overflow: auto;
}

共2个答案

匿名用户

使用CSS媒体查询设置各种屏幕大小。查看此页得源代码，以查看如何使用媒体查询。

匿名用户

为此，将父div width设置为，将max-width设置为100%。现在，如果屏幕大小不够，父div将保持在内容的宽度和屏幕的with之间。最后，要在小屏幕上的父div内滚动，请输入。

下面是Codepen演示

null

.parent {
  background-color: green;
  width: fit-content;
  max-width: 100%;
  overflow: scroll;
}

.child {
  padding: 30px;
  width: 700px;
  background-color: red;
  color: #fff;
}
<div class="parent">
  <div class="child">
    test string
  </div>
</div>

相关问题