代码之家 › 专栏 › 技术社区 › Kris

如何将视口外DIV与可见视口DIV完美对齐

alignment css jquery html

Kris · 技术社区 · 2 年前

我正在做一个项目,该项目将根据点击两个按钮从屏幕外滑出一个div并滑入另一个div。除了我需要两个DIV并排对齐外,一切都在按需工作和运行。视口外div始终与视口内div对齐。

jQuery(document).ready(function($) {
  $(".tow").click(function() {
    if ($(".ctow").hasClass("nodisplay")) {
      $(".ctow").removeClass("nodisplay");
      $(".ctoc").addClass("nodisplay");
      $(".ctoc").removeClass("active");
      $(".tow").addClass("selected");
      $(".toc").removeClass("selected");
    }
  });

  $(".toc").click(function() {
    if ($(".ctoc").hasClass("nodisplay")) {
      $(".ctoc").addClass("active");
      $(".ctoc").removeClass("nodisplay");
      $(".ctow").addClass("nodisplay");
      $(".tow").removeClass("selected");
      $(".toc").addClass("selected");
    }
  });
});

/* Flexbox Responsive Off-Canvas Layout */

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.nav {
  display: inline-block;
  padding: 20px;
}

.nav a {
  margin: 20px;
}

#wrapper {
  height: 100%;
  width: 50%;
  padding: 0px;
  margin: 0px;
  border: 1px solid red;
  text-align: center;
}

.ctow {
  background-color: darkorange;
  margin: 0;
  transform: translate(0%);
  vertical-align: top;
  padding: 50px;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}

.ctoc {
  background-color: lightblue;
  margin: 0;
  transform: translate(100%);
  padding: 50px;
  vertical-align: top;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}

.ctow.nodisplay {
  transform: translate(-100%);
}

.ctoc.nodisplay {
  transform: translate(100%);
}

.ctoc.active {
  transform: translate(0%);
}

#footer {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  background-color: gray;
  height: 10%;
  width: 100%;
  padding: 0em;
  margin: 0;
}


/** 1 PANEL **/

#right,
#left {
  display: none;
}


/** 2 PANELS (-R) **/

@media (min-width: 41em) {
  #left {
    display: box;
  }
}


/** 3 PANELS **/

@media (min-width: 61em) {
  #right,
  #left {
    display: box;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="nav"><a href="#" class="tow">Left Div</a>
  <a href="#" class="toc">Right Div</a>
</div><br />
<span style="color:red;">Sample Viewport<br /><br /></span>
<div id="wrapper">

  <div class="ctow">TOW Div Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  <div class="ctoc nodisplay">TOC Div</div>
</div>
<div id="footer">Footer</div>

Codepen 我的问题。

我尝试过使用css浮点数,display:table cell;等。在这种情况下,不能使用绝对定位或固定定位。

0 回复 | 直到 2 年前

Fazberry 2 年前

您可以尝试更新样式,使包装器显示灵活。我并不确切知道你希望它是什么样子的,但这应该会使div并排显示。我还更新了你的变换值,使div彼此相邻滑动。

#wrapper {
  display: flex;
  height: 100%;
  width: 50%;
  padding: 0px;
  margin: 0px;
  border: 1px solid red;
  text-align: center;
}

.ctow {
  flex: 1;
  background-color: darkorange;
  margin: 0;
  transform: translate(0%);
  padding: 50px;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}

.ctoc {
  flex: 1;
  background-color: lightblue;
  margin: 0;
  transform: translate(100%);
  padding: 50px;
  vertical-align: top;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}

.ctoc.nodisplay {
  transform: translate(100%);
}

.ctoc.active {
  transform: translate(-100%);
}