Question

我正在尝试使用flexbox制作文本滑块。

我希望问题div下的所有子元素都像你在chrome中看到的那样折叠。

在实际代码中，非活动元素将设置为translateX（100％），活动索引元素将设置为0％。

我想使用flexbox的原因是 Ques *：应该与问题文本的第一行对齐，而 text-container div 应该是问题div 无论 q-text div 的长度是多少。（尝试没有弹性，但我无法对齐 Quest * 和第一行文本）

与示例代码类似，由于文本长度不同，它具有不同的中心位置。

在Chrome中它运行正常。 但是，它不是以Safari为中心（使用最新版本的Safari）。

如果有更好的方法来实现这一点，我很高兴看到！

＆＃13;

#container {
  width: 100%;
  height: 200px;
  background: black;
}

.question {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}

.text-container {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  position: absolute;
  color: white
}

.q {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  align-self: baseline;
}
.q-text {
  width: 75%;
  padding-right: 12%;
}

＆＃13;

<html>

  <body>

    <div id="container">
      <div class="question">
        
        <div class="text-container">
          <div class="q">
            Qest1:
          </div>
          <div class="q-text">
            1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
          </div>

        </div>
         <div class="text-container">
          <div class="q">
            Qest2:
          </div>
          <div class="q-text">
            2Lorem Ipsum is simply dummy text of the printing and ty
          </div>

        </div>
         <div class="text-container">
          <div class="q">
            Qest3:
          </div>
          <div class="q-text">
            3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
          </div>

        </div>
        
      </div>

    </div>
  </body>

</html>

＆＃13;

Answer 1

以下是一个选项，使用display: inline-block代替flexbox和transform: translate。

window.addEventListener('load', function() {
  document.querySelector('button').addEventListener('click', function() {
    var ques = document.querySelector('.text-container:not(.hidden)');
    ques.classList.toggle('hidden');    
    var next = ques.nextElementSibling;
    if (next) {
      next.classList.toggle('hidden');
      return;
    }
    document.querySelector('.text-container').classList.toggle('hidden');
  })
})

.container {
  height: 160px;
  background: black;
}
.question {
  position: relative;
  margin: 0 auto;
  width: 90%;
  height: 100%;
  overflow: hidden;
}
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%,-50%);
  color: white;
  transition: left 0.5s;
}
.text-container.hidden {
  left: -50%;
}
.q {
  display: inline-block;
  width: 20%;
  vertical-align: top;
}
.q-text {
  display: inline-block;
  width: 80%;
  vertical-align: top;
  padding-right: 12%;
  box-sizing: border-box;
}
button {
  margin: 15px 0;
  padding: 10px;
}

<div class="container">
  <div class="question">

    <div class="text-container">
      <div class="q">
        Qest1:
      </div><div class="q-text">
        1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
      </div>
    </div>

    <div class="text-container hidden">
      <div class="q">
        Qest2:
      </div><div class="q-text">
        2Lorem Ipsum is simply dummy text of the printing and ty
      </div>
    </div>

    <div class="text-container hidden">
      <div class="q">
        Qest3:
      </div><div class="q-text">
        3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
      </div>
    </div>

  </div>
</div>
<button>Next question</button>

Answer 2

我想你希望所有的问题都集中在一起，它们应该一个接一个地出现

这里很少有东西，Flexbox和定位不能很好地协同工作

点击此链接以参考flex and absolute positioning

如果你希望所有的div都是绝对定位的，请用div分隔每个文本容器div并使其绝对定位。

检查以下代码段

＆＃13;

#container {
  width: 100%;
  height: 200px;
  background: black;
}

.question {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}
.abs{
  position:absolute;
  
  color:red;
}

.text-container {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  color: white
}
.q {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  align-self: baseline;
}
.q-text {
  width: 75%;
  padding-right: 12%;
}

＆＃13;

<html>

<body>

  <div id="container">
    <div class="question">
      <div class="abs">
         <div class="text-container">
        <div class="q">
          Qest1:
        </div>
        <div class="q-text">
          1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
        </div>

      </div>
      </div>
   
      
      <div class="abs">
       <div class="text-container">
        <div class="q">
          Qest2:
        </div>
        <div class="q-text">
          2Lorem Ipsum is simply dummy text of the printing and ty
        </div>

      </div>
      </div>
     
      <div class="abs">
       <div class="text-container">
        <div class="q">
          Qest3:
        </div>
        <div class="q-text">
          3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
        </div>

      </div>
      </div>
     

    </div>

  </div>
</body>

</html>

＆＃13;

希望有所帮助

具有绝对定位的Flex在safari中不起作用

2 个答案: