Question

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

图片1：

图片2：

正如您在图片中看到的那样，在没有太多文本的情况下，一切正常，但是有点烂，一切都变糟了-即使我在每个div上使用了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;
}

Answer 1

SELECT DISTINCT REPLACE(data, ' ', '')
FROM   mytable

.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;
}

Answer 2

只需删除“ flex-wrap：wrap;”从滑块类，这是您的示例有问题。只需遵循以下代码-：

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

在div中添加大量文本时，next元素会向下移动

2 个答案: