在div的所有四个面上添加元素

Enthu 发表于 Dev

恩图

我正在尝试在div的所有4个面上添加元素。我不想使用box-sizing，因为我必须将事件侦听器应用于要放在所有4个面上的元素上。

我可以将其添加到左侧和右侧，但是如何在所有4个侧面添加它呢？而且这也不是一种优雅的方式。

.box {
  width: 100px;
  height: 100px;
  background: yellow;
  text-align: center;
  font-size: 0.8rem;
  position: relative;
}

#sideEl {
  background-color: red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}

#sideEl2 {
  background-color: red;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}

<div class="box">
  <div id="sideEl">
  <div id="sideEl2">
</div>

我曾提到在div的每个角落放置4个html元素。但是不知道如何将它们沿着侧面边框放置

这

将另外两个添加div并使用：

一个用于识别边的类（换句话说，样式），我们称它为side，将由div充当边的s使用。此类包含如双方相互的风格background-color和position。
另外两个类：
- side-h由水平的边（顶边和底边）使用。对于这些特定方面，它们具有width和height，因为它们确实具有相同的值。同样，这些边都有cursor: n-resize垂直光标的规则。
- side-v由垂直的边（右侧和左侧）使用。对于这些特定方面，它们具有width和height，因为它们确实具有相同的值。而且，这些边都有cursor: w-resize水平光标的规则。
在#side-top与#side-left持有相同的值top和left规则。
在#side-bottom与#side-right持有相同的值bottom和left规则。

.box {
  width: 100px;
  height: 100px;
  background: yellow;
  text-align: center;
  font-size: 0.8rem;
  position: relative;
}

.box .side {
  position: absolute;
  background-color: red;
}

.box .side.side-h {
  width: 100%;
  height: 4px;
  cursor: n-resize;
}

.box .side.side-v {
  width: 4px;
  height: 100%;
  cursor: w-resize;
}

#side-top, #side-left {
  top: 0;
  left: 0;
}

#side-right, #side-bottom {
  bottom: 0;
  right: 0;
}

<div class="box">
  <div class="side side-h" id="side-top"></div>
  <div class="side side-v" id="side-right"></div>
  <div class="side side-h" id="side-bottom"></div>
  <div class="side side-v" id="side-left"></div>
</div>