Question

我正在尝试将4格彼此相邻放置，如下所示：

 __  __  __
|  ||__||  |
|  | __ |  |
|__||__||__|

这就是我正在尝试执行的操作：

.main{
  display: flex;
  background:rgba(000, 000, 000, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 100px;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}


.top{
  display: inline-block;
  width: 20px;
  height: 20px;
  background:rgba(255, 255, 255, 0.9);
  position: relative;
  margin: 7px 7px 7px 7px;
  padding: 20px;
}

.right{
  display: inline;
  width: 20px;
  height: 110px;
  background:rgba(255, 255, 255, 0.9);
  position: relative;
  margin: 7px 7px 7px 7px;
  padding: 20px;
}

.left{
  display: inline;
  width: 20px;
  height: 110px;
  background:rgba(255, 255, 255, 0.9);
  position: relative;
  margin: 7px 7px 7px 7px;
  padding: 20px;
}

.bot{
  display: inline-block;
  width: 20px;
  height: 20px;
  background:rgba(255, 255, 255, 0.9);
  position: relative;
  margin: 7px 7px 7px 7px;
  padding: 20px;
}

<!DOCTYPE html>
<body>
        <div class="main">
        
                <div class="left" >
                      <p>left</p>
                </div>
        
                <div class="top">
                      <p>top</p>
                </div>
        
                <div class="bot" >
                      <p>bot</p>
                </div>
                
                <div class="right" >
                      <p>right</p>
                </div>
        
        </div>
</body>
</html>

但是正如您所看到的，它们只是彼此相邻出现。我对display:有点困惑。我希望能对如何像上面的图案一样显示它们有所帮助。

Answer 1

有很多方法可以做到这一点，但是鉴于您已经开始使用flex，我将专注于此。

This is a great link for understanding flex.

您的main容器是代码段中的flex父级，所有其他div都是子级。 main的默认flex-direction为row，即从左到右排列。

添加垂直堆栈的最小更改是将top和bot包装在新的flex父级中，并给flex-direction的div column，即布局顶部到底部。

我将查找一些Flex布局教程。我看上去并不太费力，但是您应该可以删除一些现有的CSS。

.main {
  display: flex;
  background: rgba(000, 000, 000, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 100px;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.middle {
  display: flex;
  flex-direction: column;
}

.top {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  margin: 7px 7px 7px 7px;
  padding: 20px;
}

.right {
  display: inline;
  width: 20px;
  height: 110px;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  margin: 7px 7px 7px 7px;
  padding: 20px;
}

.left {
  display: inline;
  width: 20px;
  height: 110px;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  margin: 7px 7px 7px 7px;
  padding: 20px;
}

.bot {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  margin: 7px 7px 7px 7px;
  padding: 20px;
}

<!DOCTYPE html>

<body>
  <div class="main">

    <div class="left">
      <p>left</p>
    </div>

    <div class="middle">
      <div class="top">
        <p>top</p>
      </div>

      <div class="bot">
        <p>bot</p>
      </div>
    </div>

    <div class="right">
      <p>right</p>
    </div>

  </div>
</body>

</html>

Answer 2

如果在中间添加一个容器，那应该很好。

<html>
<body>
        <div class="main">

                <div class="left" >
                      <p>left</p>
                </div>
                <div class="mid" >
                  <div class="top">
                        <p>top</p>
                  </div>

                  <div class="bot" >
                        <p>bot</p>
                  </div>
                </div>
                <div class="right" >
                      <p>right</p>
                </div>

        </div>
</body>
</html>

https://jsfiddle.net/0oLqx6dh/

相互放置4个div

2 个答案: