Question

如何将两个div并排放置在同一角？例如，这就是我到目前为止的内容（请参见代码段）。我想再设一个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>

Answer 1

可以考虑为所有四个角要素创建包装器div，而不是将它们自己放置。因此，您不必拥有四个框的div，而是这样的：

<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/（如果您想在下面放一个框，请替换{{1 }}和flex-direction: row）

如果您想了解更多关于flexbox的信息（尝试一下，这很棒），请查看以下内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

1 个答案: