内容展开时图片错位

Question

所以，我有 this site.

当用户点击第 1 和第 2 部分的 "Learn More" 时，旁边的图像会移动。我希望它留在原来的地方。

我不明白为什么会这样，也不知道如何解决。有什么建议吗？

谢谢。

PS: 请检查网站，因为下面的例子没有图片。

$("#firstP").click(function() {       
     $("#one .hidden").addClass("block");
     $("#one .hidden").removeClass("hidden");
     $("#firstP").addClass("hidden");
   });

   $("#secondP").click(function() {       
     $("#two .hidden").addClass("block");
     $("#two .hidden").removeClass("hidden");
    $("#secondP").addClass("hidden");
   });

@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic");



 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 }

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
 }

 body {
  line-height: 1;
 }

 ol, ul {
  list-style: none;
 }

 blockquote, q {
  quotes: none;
 }

 blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
 }

 table {
  border-collapse: collapse;
  border-spacing: 0;
 }

 body {
  -webkit-text-size-adjust: none;
 }

/* Box Model */

 *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

/* Grid */

   

 body {
  background-color: #2e3141;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
  background-size: auto, cover;
  background-attachment: fixed, fixed;
  background-position: center, center;
 }

 

/* Type */

 body, input, select, textarea {
  color: #ffffff;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16.5pt;
  font-weight: 300;
  line-height: 1.65;
 }

  

 strong, b {
  color: #ffffff;
  font-weight: 600;
 }

 em, i {
  font-style: italic;
 }

 p {
  margin: 0 0 2em 0;
 }

 h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
  font-family: Raleway, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 1em 0;
  text-transform: uppercase;
 }

  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   color: inherit;
   text-decoration: none;
  }

  h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
   font-weight: 200;
  }

  h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
   padding-bottom: 1em;
   border-bottom: solid 2px rgba(255, 255, 255, 0.125);
  }

 h2 {
  font-size: 1.2em;
 }

 h3 {
  font-size: 0.9em;
 }

 h4 {
  font-size: 0.7em;
 }

 h5 {
  font-size: 0.7em;
 }

 h6 {
  font-size: 0.7em;
 }



.hidden{
 display: none !important;
}
.block{
 display: block !important;
}
span.special {
 -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  border-bottom: dotted 1px rgba(255, 255, 255, 0.35);
  color: #ffffff;
  text-decoration: none;
   text-decoration: none;
   border-bottom: 0;
   display: block;
   font-family: Raleway, Helvetica, sans-serif;
   font-size: 0.8em;
   font-weight: 700;
   cursor: pointer;
   letter-spacing: 0.1em;
   margin: 0 0 2em 0;
   text-transform: uppercase;
  }
/* Image */

 .image {
  border-radius: 5px;
  border: 0;
  display: inline-block;
  position: relative;
 }

  .image img {
   border-radius: 5px;
   display: block;
  }

  .image.left, .image.right {
   max-width: 40%;
  }

   .image.left img, .image.right img {
    width: 100%;
   }

  .image.left {
   float: left;
   padding: 0 1.5em 1em 0;
   top: 0.25em;
  }

  .image.right {
   float: right;
   padding: 0 0 1em 1.5em;
   top: 0.25em;
  }

  .image.fit {
   display: block;
   margin: 0 0 2em 0;
   width: 100%;
  }

   .image.fit img {
    width: 100%;
   }

  .image.main {
   display: block;
   margin: 0 0 3em 0;
   width: 100%;
  }

   .image.main img {
    width: 100%;
   }

  


/* Wrapper */

 #wrapper > header {
  padding: 11em 0 2.25em 0 ;
 }

  #wrapper > header .inner {
   margin: 0 auto;
   width: 55em;
  }

  #wrapper > header h2 {
   border-bottom: solid 2px rgba(255, 255, 255, 0.125);
   font-size: 2em;
   margin-bottom: 0.8em;
   padding-bottom: 0.4em;
  }


 .wrapper {
  background-color: #2e3141;
  margin: 6.5em 0;
  position: relative;
 }

  .wrapper:before, .wrapper:after {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232e3141;' /%3E%3C/svg%3E");
  }

  .wrapper:before, .wrapper:after {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   content: '';
   display: block;
   height: 6.5em;
   position: absolute;
   width: 100%;
  }

  .wrapper:before {
   left: 0;
   top: -6.5em;
  }

  .wrapper:after {
   -moz-transform: scaleY(-1);
   -webkit-transform: scaleY(-1);
   -ms-transform: scaleY(-1);
   transform: scaleY(-1);
   bottom: -6.5em;
   left: 0;
  }

  .wrapper.alt:before {
   -moz-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   -ms-transform: scaleX(-1);
   transform: scaleX(-1);
  }

  .wrapper.alt:after {
   -moz-transform: scaleY(-1) scaleX(-1);
   -webkit-transform: scaleY(-1) scaleX(-1);
   -ms-transform: scaleY(-1) scaleX(-1);
   transform: scaleY(-1) scaleX(-1);
  }

  .wrapper .inner {
   padding: 3em 0 1em 0 ;
   margin: 0 auto;
   width: 55em;
  }

  .wrapper.style2 {
   background-color: #353849;
  }

   .wrapper.style2:before, .wrapper.style2:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23353849;' /%3E%3C/svg%3E");
   }

  .wrapper.style3 {
   background-color: #3d4051;
  }

   .wrapper.style3:before, .wrapper.style3:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233d4051;' /%3E%3C/svg%3E");
   }

  .wrapper.style4 {
   background-color: #454858;
  }

   .wrapper.style4:before, .wrapper.style4:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23454858;' /%3E%3C/svg%3E");
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<section id="wrapper">

      <!-- One -->
       <section id="one" class="wrapper spotlight style1">
        <div class="inner">
         <a href="#" class="image"><img src="images/pic03.jpg" alt="" /></a>
         <div class="content">
          <h2 class="major">É fácil ou não éam? Ma você, topa ou não topamm. Ha.</h2>
          <p>Mah ooooee vem pra cá. Vem pra cá. Mah ooooee vem pra cá. Vem pra cá. Eu só acreditoammmm.... Vendoammmm. Ma tem ou não tem o celular do milhãouamm? Você veio da caravana de ondeammm? Você veio da caravana de ondeammm? Patríciaaammmm... Luiz Ricardouaaammmmmm. É com você Lombardiam. Ma vejam só, vejam só. Mah ooooee vem pra cá. Vem pra cá. Ha hai. Bem boladoam, bem boladoam. Bem gozadoam. Ma vejam só, vejam só. Ha haeeee. Hi hi. Um, dois três, quatro, PIM, entendeuam? </p>
          <span id="firstP" class="special">Learn more</span>
                                        <p class="hidden">Silvio Santos Ipsum ma você, topa ou não topamm. Ma quem quer dinheiroam? Você veio da caravana de ondeammm? É com você Lombardiam. Ma o Silvio Santos Ipsum é muitoam interesanteam. Com ele ma você vai gerar textuans ha haae. Ma vai pra lá. Ma não existem mulher feiam, existem mulher que não conhece os produtos Jequitiamm. Ha hai. Bem boladoam, bem boladoam. Bem gozadoam. Você veio da caravana de ondeammm? Estamos em ritmo de festamm. Ha hai. Bem boladoam, bem boladoam. Bem gozadoam. Eu só acreditoammmm.... Vendoammmm.
</p>
         </div>
        </div>
       </section>

      <!-- Two -->
       <section id="two" class="wrapper alt spotlight style2">
        <div class="inner">
         <a href="#" class="image"><img src="images/pic02.jpg" alt="" /></a>
         <div class="content">
          <h2 class="major">Ma vejam só, vejam só. Ma o Silvio Santos Ipsum é muitoam.
</h2>
          <p>Ma vale dérreaisam? Você veio da caravana de ondeammm? Eu não queria perguntar isso publicamente, ma vou perguntar. Carla, você tem o ensino fundamentauam? Qual é a musicamm? Ma você está certo dissoam? É com você Lombardiam. Boca sujuam... sem vergonhuamm. É namoro ou amizadeemm? Ma você está certo dissoam? Ma quem quer dinheiroam?</p>
          <span id="secondP" class="special">Learn more</span>
                                        <p class="hidden">Mah roda a roduamm. Ma vai pra lá. Eu não queria perguntar isso publicamente, ma vou perguntar. Carla, você tem o ensino fundamentauam? Ma não existem mulher feiam, existem mulher que não conhece os produtos Jequitiamm. Ma o Silvio Santos Ipsum é muitoam interesanteam. Com ele ma você vai gerar textuans ha haae. O Raul Gil é gayam! ... Maa O Ah Ae! Ih Ih! O Raul Gil é gayamm! É por sua conta e riscoamm? É fácil ou não éam? Ma não existem mulher feiam, existem mulher que não conhece os produtos Jequitiamm. Patríciaaammmm... Luiz Ricardouaaammmmmm. Patríciaaammmm... Luiz Ricardouaaammmmmm. Eu não queria perguntar isso publicamente, ma vou perguntar. Carla, você tem o ensino fundamentauam?
</p>
         </div>
        </div>
       </section>

      <!-- Three -->
  </section>

Answer 1

您需要更改 div 的不透明度，而不是显示属性。 .hidden class 有 "display:none" css 属性所以不会成为布局的一部分。使用只有 opacity:0、opacity:1 的 class 或直接设置不透明度的动画。

$("#firstP").click(function() {       
  $("#one").css("opacity", "1");
  $("#firstP").css("opacity", "0")
});

$("#secondP").click(function() {       
  $("#two").css("opacity", "1");
  $("#secondP").css("opacity", "0")
});

Answer 2

您的hiddenclass如下：

.hidden {
    display: none !important;
}

每当你有类似的东西时，相应的 html 标签将不会显示（惊喜）。现在，当您删除 class 时，将显示 html 标签。它会占用一些space，一些内容会移动right/down。到目前为止，很好，我们理解了这个问题。

解决方案：您需要确保您的图像在结构上与 p.hidden 分开。一个可能的结构：

<table>
    <tbody>
    <tr>
        <td><!-- Your image --></td>
        <td><!-- Your content --></td>
    </tr>
    </tbody>
</table>

Answer 3

您已设置 align-items: center;，因此当您 'expand' 'more' 部分时，div 的高度会发生变化，'centered position' 也会发生变化。

试试这个并添加一个 margin-top 到 .image

.wrapper.spotlight .inner {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

Answer 4

在您的 css 行 3399 中，您有一条规则：

.wrapper.spotlight .inner {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

您的商品居中对齐。如果您将 align-items: center; 更改为 align-items: flex-start;，图像将保留在正确的位置。

内容展开时图片错位

Image getting out of place when content is expanded

html

javascript

css

jquery

jquery-events