如何并排移动盒子？

Question

我现在已经尝试了好几个小时了。

我可以在左边稍微移动那个盒子，因此我也无法将图像正确地放在上面。我一直在变形网站，或者堆积了盒子......我试着用绝对的，漂浮的，基本上我所知道的一切，但我似乎无法做到正确。 你能救我吗？

Answer 1

不确定要理解问题，但要定位你的盒子，你也可以使用flexbox：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

非常易于使用并保持响应式设计。

Answer 2

如@snoof所述，这可以通过flexbox解决。关于css-tricks的指南非常有用，绝对可以阅读。

我尝试创建您的布局，希望这可以帮助您了解如何解决它。警告，这段代码并不漂亮。

https://codepen.io/anon/pen/RjLVWE

HTML：

<div class="wrapper">
    <div class="left">
        <div id="circle-1" class="circle">
            <div class="circle-inner"></div>
        </div>
        <div id="box-1" class="box">
            <div class="box-inner"></div>
        </div>
    </div>
    <div class="right">
        <div id="box-2" class="box">
            <div class="box-inner"></div>
        </div>
        <div id="circle-2" class="circle">
            <div class="circle-inner"></div>
        </div>
        <div id="box-3" class="box">
            <div class="box-inner"></div>
        </div>
    </div>
</div>

CSS：

.wrapper,
.left,
.right {
    display: flex;
}

.left,
.right {
    position: relative;
}

.left {
    width: 20%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.right {
    width: 80%;
    flex-wrap: wrap;
    flex-basis: auto;
}

.box,
.circle {
    padding: 1em;
}

.box {
    flex-grow: 1;
}

.box-inner {
    background-color: #000;
}

.circle-inner {
    padding: 7em;
    background-color: #aaa;
    border-radius: 100%;
}

#box-1 {
    width: 100%;
    height: 100%;
}

#circle-2 {
    align-self: flex-end;
}

#box-1 .box-inner {
    width: 100%;
    height: 100%;
}

#box-2 .box-inner {
    padding: 10em;
}

#box-3 {
    width: 100%;
}

#box-3 .box-inner {
    padding: 20em;
}