悬停时，只有2 x 2网格中的左侧列项目会转换边距

Question

我弄不明白为什么我的左边列的边距在悬停时转换，而不是右侧？

一开始，我以为是我的a标签，使它们display:block没有启用右手边的列转换。

我使用选择器[class^="col-"]，因为列的宽度可能会改变。这会与它的失败有关吗？

​

.wrapper {
  padding-left:3vw;
  padding-right:3vw;
}

main {
  padding-top:200px;
  padding-bottom:200px;
}

h2 {
  line-height: 1.3;
  letter-spacing: .046rem;
  font-size: 3.5rem
}

.col-5-5 {
  width:45%
}

a,a:hover,a:visited,a:focus,a:active {
  color:black;
  text-decoration:none;
}

.pic {
  padding-bottom:65%;
}

.column {
  float:left;
  display:block;
}

.column.right {
  float:right
}

.vogue-grid .item {
  display:block
}

.vogue-grid .item > [class^="col-"] {
  -webkit-transition: margin 300ms ease;
  -moz-transition: margin 300ms ease;
  transition: margin 300ms ease;
}

.vogue-grid .item > [class^="col-"] > .description {
  display: flex;
  margin: 12px 0 65px 0;
}

.vogue-grid .item:hover > [class^="col-"] {
  margin-left: 3vw
}

.vogue-grid .item > [class^="col-"] > .description > .insert {
  padding: 12px 0;
  margin-right: 16%
}

            <main>
                <div class="vogue-grid">
                    <div class="wrapper">
                        <a class="item" href="#">
                            <div class="col-5-5 column">
                                <div class="pic"
                                    style="background-image: url('https://static.pexels.com/photos/384522/pexels-photo-384522.jpeg'); background-position: center center">
                                </div>
                                <div class="description">
                                    <div class="insert col-2">
                                        2018
                                    </div>
                                    <div class="caption col-6">
                                        <h2>Calendar</h2>
                                    </div>
                                </div>
                            </div>
                        </a>
                         <a class="item" href="#">
                            <div class="col-5-5 column right">
                                <div class="pic"
                                    style="background-image: url('https://static.pexels.com/photos/384522/pexels-photo-384522.jpeg'); background-position: center center">
                                </div>
                                <div class="description">
                                    <div class="insert col-2">
                                        2018
                                    </div>
                                    <div class="caption col-6">
                                        <h2>Arts</h2>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </main>

​

Answer 1

我相信这是因为float: right;应用到了正确的项目。它已经粘在右边，所以左边距看起来不会影响布局。