html - CSS 元素位于两个元素的中间

Question

我有这 3 个元素:checkout-left、checkout-right、product-2

<div class="order-form">
                                <div class="checkout-left">
                                        <div class="video another-video">
                                                <div class="video-wrapper second-video">
                                                        <video class="video-js vjs-default-skin" controls preload="auto" width="221" height="169">
                                                                <source src="magnet.mp4" type="video/mp4">
                                                        </video>
                                                </div>
                                        </div>
                                </div>
                                <img src="http://magnaboss.com/wp-content/themes/twentyfifteen/images/checkout-right.jpg" style="float: right;" />
                                <img src="http://magnaboss.com/wp-content/themes/twentyfifteen/images/product-2.png" class="product-2" />
                                <div style="clear:both;"></div>
                        </div>

我想做的是让元素product-2重叠checkout-left和checkout-right，并且它位于中间，没有position:absolute

这是CSS

img.product-2
{
    -ms-transform: rotate(-12deg); /* IE 9 */
    -webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
    transform: rotate(-12deg);
    width: 200px;
}

.order-form {
        background-color: #FFF;
        max-width: 900px;
        width: 100%;
        border-bottom: 2px solid #000;
}

.checkout-left {
        background: url(http://magnaboss.com/wp-content/themes/twentyfifteen/images/checkout-left.jpg);
        width: 450px;
        height: 380px;
        float: left;
        border-right: 2px solid #000;
}

Answer 1

您可以向 Product-2 添加负的 margin-left 和正的 translateX

img.product-2
{
    -ms-transform: rotate(-12deg) translateX(100px); /* IE 9 */
    -webkit-transform: rotate(-12deg) translateX(100px); /* Chrome, Safari, Opera */
    transform: rotate(-12deg) translateX(100px);
    width: 200px;
    margin-left: -200px;
}

================================================== ==

编辑:这是另一种方法:

从 checkout-right 中删除 float:right

<img src="http://magnaboss.com/wp-content/themes/twentyfifteen/images/checkout-right.jpg" />

然后像这样修改product-2:

img.product-2
{
    -ms-transform: rotate(-12deg); /* IE 9 */
    -webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
    transform: rotate(-12deg);
    width: 200px;
    /* Add these lines */
    margin-top: -385px; /* Adjust if necessary */
    margin-left: 350px; /* Adjust if necessary */
    float: left;
}

最后，将 white-space: nowrap 添加到 .order-form 容器

.order-form {
        background-color: #FFF;
        max-width: 900px;
        width: 100%;
        border-bottom: 2px solid #000;
        /* This line prevents checkout-right from moving down */
        white-space: nowrap;
}

要观看现场示例，请访问:http://codepen.io/wilman/pen/xZowgG