时间戳

首页 > 解决方案 > 倾斜的两列布局不是全角

html - 倾斜的两列布局不是全角

问题描述

我的三个 feture-three 列部分列可能有一定程度的倾斜，但我的设计不是 100% 匹配，这怎么可能？任何人都可以帮助我。

在此处输入图像描述

我的示例代码在这里

<div class="container feture-three-columns">
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image1.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image2.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
       <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image1.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
</div>

我在 CSS 或 HTML 代码中有什么问题请描述我

.feture-three-columns {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.feture-three-columns .column {
    width: 33.333333%;
    position: relative;
}
.feture-three-columns .img-wrap {
    transform: rotate(-17deg);
}
.feture-three-columns .column  img {
    display: block;
    width: 119%;
    height: auto;
    transform: rotate(17deg) translateX(-83px);
}
.feture-three-columns .column  img.img-mobile { display: none; }

标签： htmlcsstransformskew

解决方案

我想你正在寻找translate: skew. 在下面的示例中，我已将此添加到您的img-wrap课程中并删除了轮换。我还从图像本身中删除了变换。

.feture-three-columns {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.feture-three-columns .column {
    width: 33.333333%;
    position: relative;
}
.feture-three-columns .img-wrap {
    transform: skew(-10deg) translateX(-12%);
}
.feture-three-columns .column  img {
    display: block;
    width: 120%;
    height: auto;
}
.feture-three-columns .column  img.img-mobile { display: none; }
<div class="container feture-three-columns">
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
       <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
</div>

推荐阅读