Question

我正在设计一个水平图像查看器，其中使用以下html在水平线上查看图像：

<div style="margin-top: 10%;width: 95%;margin: 0 auto">
  <div style="width: 1950px" id="innerScroll">
       <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="...">
                <img src="..."  />
          </a>
        </span>
    ...
    ...
</div>

然后我将使用jQuery使内部div滚动。

问题是内部div的宽度，内容可能在不同的屏幕上以不同的方式显示，因此在某些屏幕上，内容的总宽度超过了div的宽度并下降到第二行，因此请对其进行事件设置因为固定数量的像素不起作用。

如何设置div的宽度，使其自动扩展以适合内容？

Answer 1

尝试添加：

#innerScroll{
  overflow-x: scroll 
}

在宽度为1950px的内部div上，看看它是否有效。但这可能会导致整个页面滚动，但由于我没有CSS的完整示例，因此无法对其进行测试。

以下是视口百分比长度的示例：

#innerScroll{
  overflow-x: scroll 
  width: 95vw; 
}

95vw的宽度将使div的宽度等于屏幕视口宽度的95％。

您也可以使用width的fit-content属性，但是Microsoft Edge不支持该属性。更多信息here。

#innerScroll{
  overflow-x: scroll 
  width: fit-content; 
}

好的，我尝试了一些不同的尝试，但是我从您的原始帖子中删除了内联样式，但是尝试使它尽可能相似。我添加了空格：nowrap;为了避免换行，请将CSS设置为CSS，并将宽度设置为100％，使其等于父级宽度的100％。

#innerScroll {
  overflow-x: scroll;
  width: 100%;
  white-space: nowrap;
}

#wrapper {
  margin-top: 10%;
  width: 95%;
  margin: 0 auto;
}

<div id="wrapper">
  <div id="innerScroll">
       <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
    <span style="display: inline-block;">
          <a href="#">
                <img src="https://lh6.googleusercontent.com/proxy/NI1Fg3Rn_msYkSv0qXSZzNbwWqz9yNt_yB-0DlRgoJ_8P09ZCSwQiHDd5qCb-UpnHatmzFBbwMT-OB03IdunDsTeb-XxgMNS5zX6a_P3sxf8Us4WK7vYiWGCrKR8un_jOuxA39iulUXRW3zk65LO13HEkejs1HV5OWS3zIcRNvtRwy_crL8MUCS9nMqQIRgyjLMUSU8=w5000-h5000"  />
          </a>
        </span>
</div>
<div>
  Hello world!
</div>

https://jsfiddle.net/y43zraos/

使div宽度匹配内容

1 个答案: