Question

这里的问题是1/2和3/4图像正好在彼此之下，我试图将它们并排放置（中间有一些空白区域），并且也居中，这就是为什么float:left并没有帮助我。这很容易，但却让我感到害怕。

     <!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>

Answer 1

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

Answer 2

添加css规则

CSS

    .flip-container{
    display: block;
    float: left;
    margin:10px;
    }

将两个图像彼此相邻对齐

2 个答案:

CSS