Javascript 内容展开时图像不合适

所以，我有

当用户单击第一节和第二节中的“了解更多”时，侧面的图像会移动。我希望它留在原来的地方

我不明白为什么会发生这种情况，也不知道如何解决它。有什么建议吗

谢谢

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

$firstP.clickfunction{ $1.hidden.addClassblock； $1.hidden.removeClasshidden； $firstP.addClasshidden； }; $secondP.clickfunction{ $2.hidden.addClassblock； $2.hidden.removeclasshhidden； $secondP.addClasshidden； }; @进口urlhttps://fonts.googleapis.com/css?family=Raleway:200，700 | Source+Sans+Pro:300600300斜体，600italic； html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，缩写词，地址，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，dd，ol，ul，li，fieldset，form，label，label，table，table，table，table，caption，tbody，tfoot，thead，tr，th，th，th，the，the，the，the，of，旁白、画布、细节、嵌入、图形、figcaption、页脚、页眉、hgroup、菜单、导航、输出、红宝石、部分、摘要、时间、标记、音频、视频{ 保证金：0； 填充：0； 边界：0； 字体大小：100%； 字体：继承； 垂直对齐：基线； } 文章、旁白、详细信息、图表、页脚、页眉、H组、菜单、导航、章节{ 显示：块； } 身体{ 线高：1； } ol，ul{ 列表样式：无； } 区块报价，q{ 报价：无； } blockquote:before，blockquote:after，q:before，q:after{ 内容：； 内容：无； } 桌子{ 边界塌陷：塌陷； 边界间距：0； } 身体{ -webkit文本大小调整：无； } /*盒子模型*/ *，*：之前，*：之后{ -moz框大小：边框框； -webkit框大小：边框框； 框大小：边框框； } /*网格*/ 身体{ 背景色：2e3141； 背景图像：线性渐变到顶部，rgba46，49，65，0.8，rgba46，49，65，0.8，url../。/images/bg.jpg； 背景尺寸：自动，封面； 背景附件：固定，固定； 背景位置：中心，中心； } /*类型*/ 正文、输入、选择、文本区域{ 颜色：ffffff； 字体系列：源Sans Pro、Helvetica、Sans serif； 字号：16.5pt； 字体大小：300； 线高：1.65； } 强壮，b{ 颜色：ffffff； 字号：600； } 嗯，我{ 字体：斜体； } p{ 边际：0.02米0； } h1、h2、h3、h4、h5、h6{ 颜色：ffffff； 字体系列：Raleway，Helvetica，无衬线； 字号：700； 字母间距：0.1米； 边际：0.01米0； 文本转换：大写； } h1 a、h2 a、h3 a、h4 a、h5 a、h6 a{ 颜色：继承； 文字装饰：无； } h1段、h2段、h3段、h4段、h5段、h6段{ 字号：200； } h1.major，h2.major，h3.major，h4.major，h5.major，h6.major{ 垫底：1米； 边框底部：实心2pxRGBA255、255、255、0.125； } 氢{ 字体大小：1.2米； } h3{ 字号：0.9em； } h4{ 字体大小：0.7em； } h5{ 字体大小：0.7em； } h6{ 字体大小：0.7em； } .隐藏{ 显示：无！重要； } .街区{ 显示：块！重要； } span.特殊{ -moz过渡：颜色0.2s缓进缓出，边框底色0.2s缓进缓出； -webkit过渡：颜色0.2s缓入缓出，边框底部颜色0.2s缓入缓出； -ms过渡：颜色0.2s缓进缓出，边框底色0.2s缓进缓出； 过渡：颜色0.2s缓进缓出，边框底色0.2s缓进缓出； 边框底部：虚线1px rgba255、255、255、0.35； 颜色：ffffff； 文字装饰：无； 文字装饰：无； 边界底部：0； 显示：块； 字体系列：Raleway，Helvetica，无衬线； 字号：0.8em； 字号：700； 光标：指针； 字母间距：0.1米； 边际：0.02米0； 文本转换：大写； } /*形象*/ .形象{ 边界半径：5px； 边界：0； 显示：内联块； 位置：相对位置； } .图像img{ 边界半径：5px； 显示：块； } .image.left、.image.right{ 最大宽度：40%； } .image.left img、.image.right img{ 宽度：100%； } .image.left{ 浮动：左； 填充：0 1.5em 1em 0； 顶部：0.25em； } .image.对{ 浮动：对； 填充：0.01米1.5米； 顶部：0.25em； } .image.fit{ 显示：块； 边际：0.02米0； 宽度：100%； } .image.fit img{ 宽度：100%； } .image.main{ 显示：块； 保证金：0.03亿元； 宽度：100%； } .image.main img{ 宽度：100%； } /*包装纸*/ 包装器>标题{ 填充：11em0 2.25em0； } 包装器>标题.内部{ 保证金：0自动； 宽度：55em； } 包装器>标题h2{ 边框底部：实心2pxRGBA255、255、255、0.125； 字号：2em； 边缘底部：0.8em； 垫底：0.4em； } .包装纸{ 背景色：2e3141； 保证金：6.5em0； 位置：相对位置； } .wrapper:之前，.wrapper:之后{ 背景图像：urldata:image/svg+xml；charset=utf8，%3Csvg xmlns=%http://www.w3.org/2000/svg“width='100'height='100'viewBox='0 0 100'preserveApectratio='none'%3E%3Cpolygon points='0100 100,0 100100'style='fill:%232e3141；'/%3E%3C/svg%3E； } .wrapper:之前，.wrapper:之后{ 背景重复：无重复； 背景大小：100%100%； 内容：； 显示：块； 身高：6.5公分； 位置：绝对位置； 宽度：100%； } .包装工：以前{ 左：0； 顶部：-6.5em； } .包装工：之后{ -moz变换：scaleY-1； -webkit转换：scaleY-1； -ms变换：scaleY-1； 变换：scaleY-1； 底部：-6.5em； 左：0； } .wrapper.alt:之前{ -moz变换：scaleX-1； -webkit转换：scaleX-1； -ms变换：scaleX-1； 转化：scaleX-1； } .wrapper.alt:after{ -moz变换：scaleY-1 scaleX-1； -webkit转换：scaleY-1 scaleX-1； -ms变换：scaleY-1 scaleX-1； 变换：scaleY-1 scaleX-1； } .包装，内部{ 填充：3em 0 1em 0； 保证金：0自动； 宽度：55em； } .2.2{ 背景色：353849； } .wrapper.style2:之前，.wrapper.style2:之后{ 背景图像：urldata:image/svg+xml；charset=utf8，%3Csvg xmlns=%http://www.w3.org/2000/svg“width='100'height='100'viewBox='0 0 100'preserveApectratio='none'%3E%3Cpolygon points='0100 100,0 100100'style='fill:%23353849；'/%3E%3C/svg%3E； } .3.3{ 背景色：3d4051； } .wrapper.style3:之前，.wrapper.style3:之后{ 背景图像：urldata:image/svg+xml；charset=utf8，%3Csvg xmlns=%http://www.w3.org/2000/svg“width='100'height='100'viewBox='0 0 100'PreserveApectratio='none'%3E%3Cpolygon points='0100 100,0 100100'style='fill:%233d4051；'/%3E%3C/svg%3E； } .4.4{ 背景色：454858； } .wrapper.style4:之前，.wrapper.style4:之后{ 背景图像：urldata:image/svg+xml；charset=utf8，%3Csvg xmlns=%http://www.w3.org/2000/svg“width='100'height='100'viewBox='0 0 100'PreserveApectratio='none'%3E%3Cpolygon points='0100 100,0 100100'style='fill:%23454858；'/%3E%3C/svg%3E； } 埃法西勒·奥纳姆？马沃克，托帕奥诺托帕姆。哈 马霍伊·维姆·普拉卡。维姆普拉卡。马霍伊·维姆·普拉卡。维姆普拉卡。欧盟sóacreditoamm。。。。文多安。你在哪里？奥登阿姆大篷车？奥登阿姆大篷车？帕特里夏嗯。。。路易斯·李嘉图。Écom vocêLombardiam。马·维贾姆·索夫，维贾姆·索夫。马霍伊·维姆·普拉卡。维姆普拉卡。哈海。博拉多姆，博拉多姆。贝姆·戈扎多姆。马·维贾姆·索夫，维贾姆·索夫。哈伊。嗨。嗯，你是说，四重奏，四重奏，四重奏，四重奏，四重奏

了解更多

Silvio Santos Ipsum ma você，topa ou não topamm。你是说什么？奥登阿姆大篷车？Écom vocêLombardiam。我是西尔维奥·桑托斯·伊普苏姆·穆伊托姆。这是一个好消息。马瓦伊·普拉拉。我是一个好的出口商，我是一个好的出口商。哈海。博拉多姆，博拉多姆。贝姆·戈扎多姆。奥登阿姆大篷车？埃斯塔莫斯·埃姆·里特莫·德费斯塔姆。哈海。博拉多姆，博拉多姆。贝姆·戈扎多姆。欧盟sóacreditoamm。。。。文多安。

马·维贾姆·索夫，维贾姆·索夫。我是西尔维奥·桑托斯·伊普苏姆·穆伊托姆。 马维尔·德雷萨姆？奥登阿姆大篷车？欧盟是公共的，你是公共的。卡拉，你是说什么？音乐质量？你是说什么？Écom vocêLombardiam。博卡苏胡安。。。扫描电镜Vergonhaumm。Énamoro ou amizadeemm？你是说什么？你是说什么

了解更多

Mah roda a roduamm。马瓦伊·普拉拉。欧盟是公共的，你是公共的。卡拉，你是说什么？我是一个好的出口商，我是一个好的出口商。我是西尔维奥·桑托斯·伊普苏姆·穆伊托姆。这是一个好消息。哦，劳尔·吉尔·加亚姆。。。哎呀，哎呀！哈哈哈！哦，劳尔·吉尔·加亚姆！你是说什么？埃法西勒·奥纳姆？我是一个好的出口商，我是一个好的出口商。帕特里夏嗯。。。路易斯·李嘉图。帕特里夏嗯。。。路易斯·李嘉图。欧盟是公共的，你是公共的。卡拉，你是说什么？

---

您需要更改div的不透明度，而不是display属性。 .hidden类具有display:none css属性，因此不会成为布局的一部分。 使用仅具有不透明度：0、不透明度：1的类，或直接为不透明度设置动画

$firstP.cli 函数{ $1.cssopacity，1； $firstP.cssopacity，0 }; $secondP.clickfunction{ $2.cssopacity，1； $secondP.cssopacity，0 }; 您的隐藏类如下所示：

.hidden {
    display: none !important;
}

每当您有类似的内容时，相应的html标记都不会显示出来。现在，当您删除该类时，将显示html标记。它将占用一些空间，一些内容将右/下移动。到目前为止，很好，我们理解这个问题

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

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

您已设置对齐项目：居中；因此，当您“展开”“更多”部分时，div的高度会发生变化，“居中位置”也会发生变化

尝试此操作，并将页边空白添加到.image

---

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

---

您的项目将对齐到中心。如果更改对齐项目：居中；要对齐项目：flex start；图像将保留在正确的位置。

谢谢，问题已解决。我以前从未听说过flex start：@AndreaSantana，我也是：

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