3DIVS不能并排放置-有解無憂

我搜索并找到了有關此主題的多個主題，但是，我無法弄清楚這一點。

想法：我想要的只是將 3 個容器并排放置，其中每個容器自己垂直滾動影像。

CSS 影片正在運行，下面是 CSS 代碼：

#scroll-container {
    height: 600px;
    width: 600px;
    overflow: hidden;
    display: inline-block;
  }
  
#scroll-container img {
    max-width: 100%;
    max-height: 100%;
}

#scroll-text-1 {
    height: 100%;
    transform: translateY(100%);
    animation: my-animation-1 60s linear infinite;
  }

#scroll-text-2 {
    height: 100%;
    transform: translateY(-100%);
    animation: my-animation-2 60s linear infinite;
}
  
  @keyframes my-animation-1 {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(-550%);
    }
  }

  @keyframes my-animation-2 {
    from {
      transform: translateY(-550%);
    }
    to {
      transform: translateY(100%);
    }
  }

my-animation-1從下到上滾動，my-animation-2從上到下滾動。但是，當我撰寫如下 HTML 代碼時（在這種情況下，我將使用純文本而不是影像）：

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="../css/article.css">
        <title>Artikelliste Page</title>
    </head>

    <body>
        <div id="scroll-container">
            <div id="scroll-text-1">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            <div>
        </div>
        <div id="scroll-container">
            <div id="scroll-text-2">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            <div>
        </div>
        <div id="scroll-container">
            <div id="scroll-text-1">
                <!--Insert images here-->
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            <div>
        </div>
    </body>
</html>

div 彼此沒有對齊，實際上它們根本沒有對齊。您看不到下面或彼此相鄰的其他 2 個容器。出現第一個容器，但頁面上不存在其他 2 個容器。

在我進行故障排除時，我打開了開發人員工具以實際隱藏第一個容器，因為我認為它們都會相互覆寫，但沒有。當我隱藏第一個容器時，整個頁面都變空了。您仍然可以在開發控制臺中看到代碼，但頁面上沒有任何內容。

我其他沒有成功的嘗試是：

1. float: left;

2. display: inline-block;

3.在這些容器周圍做一個包裝，float: left;或者display: inline-block;

我開始意識到，如果所有 3 個容器都實際出現在頁面上，那么所有這 3 個選項都會起作用。所以這可能是完全不同的話題，無論哪種方式我都不明白。

編輯：我只是試圖在這 3 個容器下面發送垃圾郵件 br 標簽，但它什么也沒做......好像代碼被容器綁架了......

uj5u.com熱心網友回復：

你的 html 是invalid

而不是三個#scroll-container我只保留一個使其成為#scroll-text-1 #scroll-text-2 #scroll-text-3然后添加的父 div

display:flex align-items:center; justify-content:space-around;為了#scroll-container 讓所有的孩子并排排列。為了答案，我也只保留了一個影片。

#scroll-container {
    height: 600px;
    width: 600px;
    overflow: hidden;
    display: flex;
    align-items:center;
    justify-content:space-around;
  }
  
#scroll-container img {
    max-width: 100%;
    max-height: 100%;
}
#scroll-text-1 {
    height: 100%;
    transform: translateY(100%);
    animation: my-animation-1 10s linear infinite;
  }

#scroll-text-2 {
    height: 100%;
    transform: translateY(-100%);
    animation: my-animation-1 10s linear infinite;
}
#scroll-text-3 {
    height: 100%;
    transform: translateY(-100%);
    animation: my-animation-1 10s linear infinite;
}
  
  @keyframes my-animation-1 {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(-550%);
    }
  }

<div id="scroll-container">
        <div id="scroll-text-1">
            <!--Insert images here-->
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text
        </div>
        <div id="scroll-text-2">
            <!--Insert images here-->
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text
        </div>
        <div id="scroll-text-3">
            <!--Insert images here-->
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text
        </div>
    </div>

uj5u.com熱心網友回復：

您的代碼中有一些損壞的關閉</div>s，并且您應該在頁面上有唯一的 ID。這可行，但第二列的影片確實需要很長時間才能填充

#scroll-container {
    height: 600px;
    width: 33%;
    overflow: hidden;
    display: inline-block;
    float: left;
}
#scroll-container-2{
    height: 600px;
    width: 33%;
    overflow: hidden;
    display: inline-block;
    float: left;
}
#scroll-container-3 {
    height: 600px;
    width: 33%;
    overflow: hidden;
    display: inline-block;
    float: left;
}

#scroll-text-1 {
    height: 100%;
    transform: translateY(100%);
    animation: my-animation-1 60s linear infinite;
  }

#scroll-text-2 {
    height: 100%;
    transform: translateY(-100%);
    animation: my-animation-2 60s linear infinite;
}
  
  @keyframes my-animation-1 {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(-550%);
    }
  }

  @keyframes my-animation-2 {
    from {
      transform: translateY(-550%);
    }
    to {
      transform: translateY(100%);
    }
  }

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="../css/article.css">
        <title>Artikelliste Page</title>
    </head>

    <body>
        <div id="scroll-container">
            <div id="scroll-text-1">
                <!--Insert images here-->
                Text1<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
        <div id="scroll-container-2">
            <div id="scroll-text-2">
                <!--Insert images here-->
                Text2<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
        <div id="scroll-container-3">
            <div id="scroll-text-1">
                <!--Insert images here-->
                Text3<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text<br>
                Text
            </div>
        </div>
    </body>
</html>

uj5u.com熱心網友回復：

這一直只是一個未封閉的標簽<div>……但是，我真的很想保住我的作業，我會認真考慮這里的其他更清潔、更好的選擇。巨大的 L 和一個菜鳥的錯誤，但我感謝大家的時間。

uj5u.com熱心網友回復：

您可以使用 flexbox 輕松實作此布局：

body {
  margin: 0;
}

#wrap {
  background: goldenrod;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-flow: row wrap;
}

.scroll-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(90%, 100px);
  margin: 10px;
  padding: 10px;
  background: white;
}

.scroll-container__item {
  height: 30px;
  width: 90%;
  background: darkorchid;
  margin: 5px 0;
}

<div id="wrap">
  <div class="scroll-container scroll-container--one">
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
  </div>
  <div class="scroll-container scroll-container--two">
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
  </div>
  <div class="scroll-container scroll-container--three">
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
    <div class="scroll-container__item"></div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/508203.html

標籤：html css

上一篇：帶旋轉半徑的圓

下一篇：無法從laravel在我的資料庫中插入資料