Question

我想在CSS3中使用这种风格：

现在，我有最简单的东西，中间的方块有以下代码：

HTML（非常不相关，但我想标签不需要是div标签）：

<div id="divBorder">
</div>

CSS：

#divBorder{
    border-style: solid;
    border-width: 1px;
    position: absolute;
    width: 300px;
    height: 300px;
    z-index: 15;
    top: 50%;
    left: 50%;
    margin: -110px 0 0 -160px;
}

所以，我只是基本上将中间正方形放在屏幕中央，这就是全部，我找不到办法在整个正方形的两边做另外两个半正方形。

我希望你能帮助我，非常感谢你！

Answer 1

使用flexbox可以使用以下标记实现所需的布局。

body {
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: 1;
  background-color: mediumspringgreen;
}

div {
  flex: 4;
  display: flex;
  background-color: darkviolet;
}

section {
  flex: 1;
}

section:nth-child(even) {
  flex: 2;
  background-color: darkorchid;
}

footer {
  flex: 1;
  background-color: deeppink;
}

<main>
  <header></header>
  <div>
    <section></section>
    <section></section>
    <section></section>
  </div>
  <footer></footer>
</main>

Answer 2

.inner {
border:solid; 


}

.outer {display: flex;
flex-direction:row;}

.side {width: 25%; height: 50px;}

.center {width: 50%; height: 50px}

<div class="outer">
<div class="side inner"></div>
<div class="center inner"></div>
<div class="side inner"></div>
</div>

您可以使用flexbox执行此操作。您可以在procentage中设置宽度，也可以使用flexbox查看其大小。

如何使用CSS3创建以下样式？

2 个答案: