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

Question

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

我能够在左侧和右侧添加它，但是如何在所有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>

我已推荐Placing 4 html elements in every corner of a div。但是不知道如何将它们沿着侧边框放置

Answer 1

我将height和width参数交换为水平对齐的元素，以便按预期显示它们。同样，您应该只使用其中一个选项（top right bottom left）将元素与四个边之一对齐。这是代码：

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

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

#sideE2 {
  background-color: brown;
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}
#sideE3 {
  background-color: blue;
  position: absolute;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}
#sideE4 {
  background-color: green;
  position: absolute;
  bottom: 0;
  height: 4px;
  width: 100%;
  cursor: w-resize;
}

<div class="box">
  <div id="sideEl"></div>
  <div id="sideE2"></div>
  <div id="sideE3"></div>
  <div id="sideE4"></div>
</div>

Answer 2

添加另外两个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的{​​{1}}和top规则具有相同的值。

• left和#side-bottom的{​​{1}}和#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; }中的元素的顺序 ，而不会影响最终结果。

Answer 3

/topic

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

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

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

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

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

Answer 4

希望您能明白...

###

var phones = document.querySelectorAll('.phone');
phones.forEach(function(p){
  var t = p.textContent;
  p.textContent = t.slice(0, -3) + '###';
});