div+css 横向滚动公告 自适应公告长度

要实现自适应长度的横向滚动公告，可以使用CSS3的flex布局和marquee标签。具体步骤如下：

1. 使用一个div元素作为容器，设置宽度为100%、高度为固定值，并且设置overflow属性为hidden，使内容超过div大时被隐藏。

2. 在div容器内部创建一个ul元素，并使用CSS3的flex布局，设置flex-wrap属性为nowrap，使ul元素内部的li元素无法换行。

3. 对ul元素设置white-space属性为nowrap，使ul元素内部的文本不换行。

4. 对li元素设置display:inline-block，使li元素能够在一行内显示。

5. 使用marquee标签来实现横向滚动的效果，并将marquee标签内部的内容设置为ul元素。

6. 通过CSS3的media query来实现不同屏幕尺寸下的适配。

下面是示例代码：

HTML代码:

<div class="notice-container">
  <marquee behavior="scroll" direction="left">
    <ul class="notice-list">
      <li>第一条公告信息</li>
      <li>第二条公告信息</li>
      <li>第三条公告信息</li>
      <li>第四条公告信息</li>
      <li>第五条公告信息</li>
      <li>第六条公告信息</li>
      <li>第七条公告信息</li>
    </ul>
  </marquee>
</div>

CSS代码:

.notice-container {
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.notice-list {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.notice-list > li {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .notice-list > li {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .notice-list > li {
    font-size: 14px;
  }
}

@media screen and (min-width: 992px) {
  .notice-list > li {
    font-size: 16px;
  }
}

通过上述步骤，就可以实现一个自适应长度的横向滚动公告了。可以根据需要调整容器的高度、文本的字体大小、marquee标签的滚动速度等参数来适应不同的场景。