Question

所以，我有this site.

当用户点击第1和第2部分中的“了解更多”时，侧面的图像会移动。我希望它保持原来的位置。

我不知道为什么会发生这种情况并且不知道如何修复它。有什么建议吗？

感谢。

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

在你的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;，则图片将保留在正确的位置。

Answer 2

您已设置align-items: center;，因此当您'展开'更多'部分时，div的高度会发生变化，而'居中位置'也会发生变化。

尝试此操作并在.image

中添加margin-top

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

Answer 3

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

＆＃13;

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

＆＃13;

Answer 4

您的hidden课程如下：

.hidden {
    display: none !important;
}

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

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

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

内容展开后图片不在适当位置

4 个答案: