gpt4 book ai didi

html - 将两个图像彼此对齐

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:39 24 4
gpt4 key购买 nike

这里的问题是 1/2 和 3/4 图像正好在彼此下方,我试图让它们并排(中间有一些空白),并居中,这就是为什么 float:left 对我没有帮助。这非常简单,但它让我很难受。

fiddle :http://jsfiddle.net/9ABsP/

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta name="color:Background Color" content="#FFFFFF"/>
<meta name="image:Background Image"/>
<meta name="image:Header Image"/>
<meta name="image:Panel 1 Image Font"/>
<meta name="image:Panel 1 Image Back"/>
<meta name="image:Panel 2 Image Font"/>
<meta name="image:Panel 2 Image Back"/>


<title>{Title}</title>
<link rel="shortcut icon" href="png2.png" />
<link rel="apple-touch-icon" href="png1.png"/>
<style>



.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 152px;
max-height: 511px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}




body {
background-color: {color:Background Color};
background-image: url({image:Background Image});
}

#header {
height:125px;
margin-bottom: 0px;
}

#header img {
height:75px;

}

</style>
<body>
<title>{Title}</title>
<center>
<div id="header">
<a href="/" title="{Title}"><img src="http://www.rheababla.co.uk/wp-content/uploads/2013/02/header.jpg" /></a>
</div>



<div class="flip-toggle">

<div class="flip-container">

<div class="flipper">

<div class="front">

<img src="http://www.clker.com/cliparts/V/1/Y/3/j/Z/blue-number-1-th.png">

</div>

<div class="back">

<img src="http://thecripplegate.com/wp-content/uploads/2012/12/2.png">

</div>

</div>
</div>


<div class="flip-container">

<div class="flipper">

<div class="front">

<img src="https://yt3.ggpht.com/-iAlI90Z4-OM/AAAAAAAAAAI/AAAAAAAAAAA/S6CbXusFQXQ/s100-c-k-no/photo.jpg">

</div>

<div class="back">

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/06/LAret4.PNG/100px-LAret4.PNG">
</div>
</div>
</div>
</div>

</div>

</center>
</body>
</html>

最佳答案

添加 display: inline-block; 到 flip-container div。这是更新的 fiddle .您可以使用边距/填充来调整两者之间的空间。

关于html - 将两个图像彼此对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24523358/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com