Question

嗨，我有一个问题，我有一个div的图像列表，在另一个div与一类流。我希望图像并排在一行，我希望div与流的类在div的底部有一个滚动条所以当我滚动我看到我想要水平滚动的图像而不是垂直我想要垂直滚动条不显示。但我遇到的问题是这个问题真的在考验我的耐心。我试着做浮动：在div的一侧使用类流式传输的div，但它只是在它到达页面边缘时堆叠它们，我还需要它来调整是否添加了更多的项目。谢谢

HTML：

<div class="streaming">
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
</div>

CSS：

.streaming div {
    display: table;
    float: left;
    padding: 5px;
}

.streaming {
    overflow-y:hidden;
    overflow-x: scroll;
    width: 100%;
}

Answer 1

听起来你需要将$ docker-compose up Starting asynchttpproxy_postgres_1 Starting asynchttpproxy_web_1 Attaching to asynchttpproxy_postgres_1, asynchttpproxy_web_1 postgres_1 | LOG: database system was interrupted; last known up at 2017- 05-01 21:27:43 UTC postgres_1 | LOG: database system was not properly shut down; automatic recovery in progress postgres_1 | LOG: invalid record length at 0/150F720: wanted 24, got 0 postgres_1 | LOG: redo is not required postgres_1 | LOG: MultiXact member wraparound protections are now enabled postgres_1 | LOG: database system is ready to accept connections web_1 | Performing system checks... web_1 | web_1 | System check identified no issues (0 silenced). web_1 | Unhandled exception in thread started by <function check_errors.<locals>.wrapper at 0x7f51f88bef28> web_1 | Traceback (most recent call last): web_1 | File "/usr/local/lib/python3.6/site-packages/django/db/backends/base/base.py", line 130, in ensure_connection web_1 | self.connect() web_1 | File "/usr/local/lib/python3.6/site-packages/django/db/backends/base/base.py", line 119, in connect web_1 | self.connection = self.get_new_connection(conn_params) web_1 | File "/usr/local/lib/python3.6/site-packages/django/db/backends/postgresql_psycopg2/base.py", line 176, in get_new_connection web_1 | connection = Database.connect(**conn_params) web_1 | File "/usr/local/lib/python3.6/site-packages/psycopg2/__init__.py", line 164, in connect web_1 | conn = _connect(dsn, connection_factory=connection_factory, async=async) web_1 | psycopg2.OperationalError: could not connect to server: Connection refused web_1 | Is the server running on host "localhost" (127.0.0.1) and accepting web_1 | TCP/IP connections on port 5432? web_1 | could not connect to server: Cannot assign requested address web_1 | Is the server running on host "localhost" (::1) and accepting web_1 | TCP/IP connections on port 5432?设置为流媒体div。我不会使用float但是会这样做：

＆＃13;

overflow-y:hidden

＆＃13;

Answer 2

尝试添加display：inline;你的div css

.streaming > div {
    display: inline;
    float: left;
    padding: 5px;
}

Answer 3

我会使用flex执行此操作，默认的flex row会以这种方式运行。

.streaming div {
  padding: 5px;
}

.streaming {
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
}

<div class="streaming">
    <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div><div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div><div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
</div>

如何让一行中的图像一直穿过屏幕

3 个答案: