jQuery Div在向右但向左移动时缩小

Question

我正在此页面上工作，您可以在这里看到。 当您单击“ Let's Get Started ，然后单击随后的右V形符号时，div会很好地向左移动，并且不会缩小。 但是，如果单击“后退”或向左指向的V形，则div会像应有的那样向右移动，但也会缩小，这是我不希望的。

如何使div向右移动而不缩小？ 我已经更改了css，以便div不会一直移出页面，这样您就可以看到正在发生的事情。

这是我正在做的jQuery：

function forward(){
  console.log("forward ran");
  // debugger;
  console.log("in forward page is " + page + " before adding");  
  $('#' + page).addClass( "gone_left", 1000, "swing" );
  page = page + 1;
  $('#' + page).removeClass("gone_left gone_right");
  console.log("in forward page is " + page + " after adding");
  manageChevrons();
}

function back(){
  console.log("back ran");
  // debugger;
  console.log("in back page is " + page + " before adding");   
  $('#' + page).addClass( "gone_right", 1000, "swing");
  page = page - 1;
  $('#' + page).removeClass("gone_left gone_right");
  manageChevrons();
}

manageChevrons只管理左右人字形。

然后我的CSS

@media only screen and (min-width: 900px){
html {
    font-size: 18px;
  }
}

.no_overflow {
  overflow: hidden !important;
}

.gone_left {
    left: -5% !important;
}

.gone_right {
    left: 90% !important;
}

.card_center {
  position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-50%) !important;
    left: 50%;
}

最后是页面的HTML

<html>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<body class="no_overflow">

  <div class="container top-pad">
    <div class="row">
      <div class="col s4">
        <%= image_tag "logo.png", class:"responsive-img" %>
      </div>
    </div>
  </div>

<div class="container">
  <div class="row valign-wrapper">
    <div class="left_chevron">
      <i id="chevron_left" class="waves-effect waves-circle large material-icons purple-text text-darken-4 hidden left_chevron">chevron_left</i>
    </div>

      <div id="3" class="card large card_center">
        <div class="card-image">
          <%= image_tag "3.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content card_position">
          <p>This is #4
            <ul>US: xxx</ul>
            <ul>EU: xxx</ul>  
          </p>
        </div>
      </div> <!-- end of fourth card -->

      <div id="2" class="card large card_center">
        <div class="card-image">
          <%= image_tag "2.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content card_position">
          <p>You will need to get carrier calculated shipping
            enabled on your store. Its free if you signed
            up for the annual plan, otherwise its just $20/month.
            Call Shopify to enable it:
            <ul>US: xxx</ul>
            <ul>EU: xxx</ul>  
          </p>
        </div>
      </div> <!-- end of third card -->

      <div id="1" class="card large card_center">
        <div class="card-image">
          <%= image_tag "1.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content card_position">
          <p>For $25/month we fulfill an unlimited number of
            orders, so you don't have too.</p>
        </div>
      </div> <!-- end of second card -->      

      <div id="0" class="card large card_center">
        <div class="card-image"> 
          <%= image_tag "hi.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content card_position">
          <p>Welcome to FBA Shipping by ByteStand.
            A super simple way to automate fulfilling FBA items
            in the US and abroad.</p>
        </div>
        <div class="card-action">
          <button id="first_button" class="waves-effect btn stroke-btn tap">Let's Get Started!</button>
        </div>
      </div><!-- end of first card -->


    <div class="right_chevron">
      <i id="chevron_right" class="waves-effect waves-circle large material-icons purple-text text-darken-4 hidden right_chevron">chevron_right</i>
    </div>
    </div> <!-- end of main row -->
  </div> <!-- end of container -->

  </body>
</html>

Answer 1

在名为.card的CSS类上，从"max-width:500px;"删除"max" "max-width:500px;"

因此基本上就是将其设置为"width:500px;" 就是这样。