代码之家 › 专栏 › 技术社区 › geany_tab_title_color

如何将4个div围绕一个中心div?

transform css html

geany_tab_title_color · 技术社区 · 2 年前

我将一个黄色的div水平和垂直居中,如下所示:
<div style="position:absolute;width:830px;height:590px;background:yellow;left:50%;top:50%;transform:translate(-50%, -50%);"></div>
我想在中间的div周围有4个div,所以一个div在左边,一个div在右边,一个div在上面,一个div在下面,每一个都有不同的颜色,每个都应该只接触视图端口的一个边框,每个都应该接触中间div的一个边框。

3 回复 | 直到 2 年前

tacoshy 2 年前

我想最简单的方法就是使用 CSS-Grid .然后你可以通过 grid-column 和 grid-row 放置或使用 grid-area .

要让元素(div)接触视口的一个边界,需要定义网格的高度 100vh 。您还需要删除默认设置 body margin

.container {
  display: grid;
  min-height: 100vh;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    ". top ."
    "left center right"
    ". bottom .";
}

.center {
  grid-area: center;
}

.top {
  grid-area: top;
}

.right {
  grid-area: right;
}

.bottom {
  grid-area: bottom;
}

.left {
  grid-area: left;
}


/* for demo purpose only */
body {
  margin: 0;
}

.container > div {
  box-sizing: border-box;
  border: 2px dashed black;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="center">Center</div>
  <div class="top">Top</div>
  <div class="right">Right</div>
  <div class="bottom">Bottom</div>
  <div class="left">Left</div>
</div>

tacoshy 2 年前

我认为其他答案更好,但这里有一个替代方案:

.container {
  width: 100%;
  height: 100vh;
  background: purple;
  gap: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.upper-row,
.middle-row,
.bottom-row {
  flex: 1;
}

.upper-row .inner-row {
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.3);
  width: calc(100% / 3);
  height: 100%;
}

.middle-row {
  display: flex;
  gap: 20px;
}

.middle-row .inner-row {
  width: calc(100% / 3);
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
}

.middle-row .inner-row:nth-child(2) {
  background: red;
}

.bottom-row .inner-row {
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.3);
  width: calc(100% / 3);
  height: 100%;
}

<div class="container">
  <div class="upper-row">
    <div class="inner-row"></div>
  </div>
  <div class="middle-row">
    <div class="inner-row"></div>
    <div class="inner-row"></div>
    <div class="inner-row"></div>
  </div>
  <div class="bottom-row">
    <div class="inner-row"></div>
  </div>
</div>

https://jsfiddle.net/kdsv99/140w56th/16/

-1

Sheng Huang 2 年前

如果你这样做是为了学习,首先停止在html上使用样式,但要包含一个css文件,其次你应该查看flexbox属性或网格。您可以使用display-flex创建一个带有display:flex;包含三个元素的div1,你的div和div2,然后在div1和div2中创建另外两个div,并给它们显示:flex;弯曲方向:行;25%的宽度;高度自动; 你的div应该有50%的宽度