Question

我有以下3个元素：checkout-left，checkout-right，product-2

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

我要做的是让元素product-2重叠checkout-left和checkout-right，它正好在中间没有位置：absolute

这是CSS

if (c = 1) {
    ...
}

Answer 1

您可以向产品-2

添加否定的margin-left和肯定的translateX

＆＃13;

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

＆＃13;

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

编辑：这是另一种方法：

从结帐右侧

中删除float:right

＆＃13;

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

＆＃13;

然后像这样修改 product-2 ：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

要观看实时示例，请访问：http://codepen.io/wilman/pen/xZowgG

CSS在两个元素的中间有元素

1 个答案: