html - 在 div 中添加大量文本时，下一个元素会向下移动

Question

我正在使用弹性 div。现在，当我在其中添加大量文本时，它会使 div 接近移动并失去位置，希望你们能帮忙。

图片1：

图二：

正如您在图片中看到的那样，没有太多文本，一切正常，但是有点 lorem，一切都变糟了——即使我在每个 div 上使用了 3 的 flex-grow，div 内的大小也会发生变化

html:

<section id='portfolio'>
<h1>My Projects</h1>
      <div class="slider">
        <div class="left">
          <span class="left-arrow"></span> </div>
        <ul> 
          <li class="slider-item">
            <div class="app">
              <img src="./images/movies.jpg" alt="">
              <ul>
                <li>Name: Movies WebApp</li>
                <li>Description: Manage movise stock Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores obcaecati quaerat fugit nisi dolore optio possimus facere ratione, maiores dicta earum aut tempora unde facilis vitae vero, quas totam.</li>
                <li>Backend: -</li>
                <li>Frontend: Angular, CSS, Html</li>
                <li>DB: -</li>

              </ul>
          </li>           
        </ul>
        <div class="right"><span class="right-arrow"></span></div>
        <ol class="pagination">
        </ol>
      </div>
      </div>

    </section>

CSS：

.slider {
  min-width: 100%;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
}

.slider ul {
  flex-grow: 10;
  min-height: 300px;
  justify-content: center;
}

.slider ul .slider-item {
  min-height: 300px;
  display: flex;
  position: relative;
}

.app {
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  overflow: hidden;
  box-sizing: border-box;
}
.app img {
  min-width: 500px;
  height: 300px;
  flex-grow: 3;
}
.app ul {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  color: black;
  width: 100%;
  flex-grow: 3;
  justify-content: center;
  background-color: aqua;
}

.app ul li {
  flex-grow: 1;
}

.right,
.left {
  padding: 20px;
  flex-grow: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 0.3s;
  position: relative;
  min-width: 40px;
  flex-wrap: nowrap;
}

.left-arrow {
  position: absolute;
  left: 30px;
  width: 20px;
  height: 20px;
  border-left: 2px solid rgb(163, 163, 163);
  border-bottom: 2px solid rgb(163, 163, 163);
  transform: rotate(45deg);
  cursor: pointer;
  transition: 0.3s;
}

.right-arrow {
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgb(163, 163, 163);
  border-bottom: 2px solid rgb(163, 163, 163);
  transform: rotate(-45deg);
  cursor: pointer;
  transition: 0.5s;
}

标签： htmlcss

Answer 1

.slider {
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.slider > ul {
  padding-left: 0;
  width: calc(100% - 160px);
}

.slider ul {
  flex-grow: 10;
  min-height: 300px;
  justify-content: center;
}

.slider ul .slider-item {
  min-height: 300px;
  display: flex;
  position: relative;
}

.app {
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  overflow: hidden;
  box-sizing: border-box;
}
.app img {
  min-width: 500px;
  height: 300px;
  flex-grow: 3;
}
.app ul {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  color: black;
  width: 100%;
  flex-grow: 3;
  justify-content: center;
  background-color: aqua;
}

.app ul li {
  flex-grow: 1;
}

.right,
.left {
  padding: 20px;
  flex-grow: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 0.3s;
  position: relative;
  min-width: 40px;
  flex-wrap: nowrap;
}

.left-arrow {
  position: absolute;
  left: 30px;
  width: 20px;
  height: 20px;
  border-left: 2px solid rgb(163, 163, 163);
  border-bottom: 2px solid rgb(163, 163, 163);
  transform: rotate(45deg);
  cursor: pointer;
  transition: 0.3s;
}

.right-arrow {
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgb(163, 163, 163);
  border-bottom: 2px solid rgb(163, 163, 163);
  transform: rotate(-45deg);
  cursor: pointer;
  transition: 0.5s;
}

<section id='portfolio'>
<h1>My Projects</h1>
      <div class="slider">
        <div class="left">
          <span class="left-arrow"></span> </div>
        <ul> 
          <li class="slider-item">
            <div class="app">
              <img src="./images/movies.jpg" alt="">
              <ul>
                <li>Name: Movies WebApp</li>
                <li>Description: Manage movise stock Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae asperiores obcaecati quaerat fugit nisi dolore optio possimus facere ratione, maiores dicta earum aut tempora unde facilis vitae vero, quas totam. </li>
                <li>Backend: -</li>
                <li>Frontend: Angular, CSS, Html</li>
                <li>DB: -</li>

              </ul>
          </li>           
        </ul>
        <div class="right"><span class="right-arrow"></span></div>
        <ol class="pagination">
        </ol>
      </div>
      </div>

    </section>