两个Divs，一个彼此相邻，在同一角落

我如何在同一角落并排放置两个divs？例如，这是我到目前为止的内容(请参阅摘要(。我想还有另一个Div，可以说在现有红色旁边左上方的蓝色。是否也可以将其放在红色下方？

下方

谢谢

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
</head>
<style>
    .box {
        position: absolute;
        background-color: red;
        width: 100px;
        height: 100px;
    }
    .box.top {
        top: 0;
    }
    .box.right {
        right: 0;
    }
    .box.left {
        left: 0;
    }
    .box.bottom {
        bottom: 0
    }
</style>
<body>
<div id="container">
    <div id="main" style="background-color: pink; height: 100vh; width: 100%; position: relative;"></div>
    <div class="box top left"></div>
    <div class="box top right"></div>
    <div class="box bottom left"></div>
    <div class="box bottom right"></div>
</div>
</body>
</html>

，而不是将盒子本身定位，而是考虑为您的所有四个角元素中的所有角色创建包装divs。因此，您将拥有这样做：

，而不是拥有四个盒子

<div class="box-wrapper top left">
  <div class="box red"></div>
  <div class="box blue"></div>
</div>
<div class="box-wrapper top right">
  <div class="box red"></div>
</div>
<div class="box-wrapper bottom left">
  <div class="box red"></div>
</div>
<div class="box-wrapper bottom right">
  <div class="box red"></div>
</div>

现在，将display: flex用于box-wrapper类和flex-direction: row，以便水平对齐。(如果愿意，您可以分配不同的类，并配置方向"每个角"(。

这是一个工作示例，显示了您提到的情况(在左上角的红色框旁边有一个蓝色框(：https：//jsfiddle.net/uejw2yr3/(如果您想在下面有盒子，用flex-direction: column替换flex-direction: row(

如果您想了解更多有关Flexbox(尝试一下，真是太棒(，请查看：https：//css-tricks.com/snippets/css/a-guide-to-flex-flexbox/phipbox/pbox/phipte/p>

相关内容

最新更新

热门标签：