div+css 横向滚动公告，公告只有一条 自适应公告长度

要实现只有一条并且自适应长度的横向滚动公告，可以使用CSS3的flex布局和animation动画。具体步骤如下：

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

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

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

4. 使用CSS3的animation动画来实现横向滚动的效果，并将animation动画应用到p元素上。

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

下面是示例代码：

HTML代码:

<div class="notice-container">
  <p class="notice-text">这是一条公告信息</p>
</div>

CSS代码:

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

.notice-text {
  display: flex;
  white-space: nowrap;
  animation: notice-scroll 10s linear infinite;
}

@keyframes notice-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

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

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

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

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