重叠的HTML标记

Question

我希望有三个数字（或单词或其他）：前两个数字用红框框起来，后两个数字用绿框框起来。所以这些框会重叠。在html/css中是否可能实现这一点？我在代码片段中尝试了一种半法律的方法，希望能够表达出我的意思，但当然它并不起作用。如果可能的话，我想避免使用绝对定位或类似的东西，因为我真的想使用这些元素来标记文本，并计划稍后读取该标记。

.red {
    border-style: solid;
    border-color: red;
    padding: 4px;
}
.green {
    border-style: solid;
    border-color: green;
}

1 2 3                              <br /><br />
<span class="red">1 2</span> 3     <br /><br />
1 <span class="green">2 3</span>   <br /><br />
<span1 class="red"">1 <span2 class="green">2</span1> 3</span2>

这大致上就是我想要的样子：

- user12861

---

我无法完全理解你在这里的意图，即使你提供了示例。你能否在画图板上绘制你想要的内容并展示给我们看？ - Tom Faltesek

我认为他想让数字2成为两个“集合”中的一个“共享”元素。并且通过视觉展示它们的交集。 - Steve Wellens

如果你把问题词组化为“如何重叠显示边框的 div 元素”...可能会得到不同的回答方法。 - Waxi

@slime 我明白你的意思，但我真正想做的是让标记表明重叠，就像我包含的（不起作用的）示例片段中所示。我认为这在HTML中是不可能的，但我很想有人向我展示一个好的方法。我认为重叠的div并不能捕捉到我想要的东西。 - user12861

Answer 1

您想故意破坏XHTML中的XML格式，使浏览器正确解释元素的边框？这在以前很常见，比如使用类似于<b class="red"">1 <u class="green">2</b> 3</u>的东西，您会发现它更接近您想要的，但是现在的浏览器在显示时会填补这些差距，并在添加CSS时强制进行正确的格式化。因此，您只能使用CSS hack... 抱歉，看起来:first-of-type和:last-of-type不喜欢被添加到两个类中，例如.red.green:first-of-type，所以我必须将它们作为类中的first和last添加。您可以通过查看哪些元素具有这两个类来找到重叠部分。

     .numbersContainer {
       position: relative;
       margin: 12px;
     }
     .red {
       border-top-style: solid;
       border-bottom-style: solid;
       border-color: red;
       padding: 4px;
     }
     .green {
       border-top-style: solid;
       border-bottom-style: solid;
       border-color: green;
     }
     .red.green:before {
       content: " ";
       position: absolute;
       z-index: -1;
       top: 0px;
       left: 0px;
       right: 0px;
       bottom: 0px;
       border-top-style: solid;
       border-bottom-style: solid;
       border-color: green;
       padding: 4px;
     }
     .red.green {
       position: relative;
       border-top-style: solid;
       border-bottom-style: solid;
       border-color: red;
       padding: 4px;
     }
     .numbersContainer .red:first-of-type {
       border-left-style: solid;
     }
     .numbersContainer .red:last-of-type {
       border-right-style: solid;
     }
     .numbersContainer .green:first-of-type {
       border-left-style: solid;
     }
     .numbersContainer .green:last-of-type {
       border-right-style: solid;
     }
     .first {
       border-left-style: solid;
     }
     .last {
       border-right-style: solid;
     }
     .red.green.first {
       border-left-style: none;
     }
     .red.green.first:before {
       border-left-style: solid;
     }
     .red.green.last {
       border-right-style: solid;
     }
     .red.green.last:before {
       border-right-style: none;
     }
     

<div class="numbersContainer">
  1 2 3
</div>
<div class="numbersContainer">
  <span class="red">1 2</span> 3
</div>
<div class="numbersContainer">
  1 <span class="green">2 3</span> 
</div>
<div class="numbersContainer">
  <span class="red">1 </span><span class="red green first last">2</span><span class="green">3</span>
</div>
<div class="numbersContainer">
  <span class="red">1 </span><span class="red green first">2</span><span class="red green">3</span><span class="red green">4</span><span class="red green last">5</span><span class="green">6</span>
</div>

- Dave Goten

Answer 2

可以实现，但这不是很好的编码风格。如果更改文本，还必须更改.green的填充和边距。

.red {
  border-style: solid;
  border-color: red;
  padding: 4px;
  width: 16px;
}
.green {
  border-style: solid;
  border-color: green;
  padding: 2px 4px 2px 24px;
  margin-left: -20px;
}

<span class="red">1 2</span><span class="green">3</span> 

- Michael Wagner

---

只要使用不同的字体或内容（例如单个字母而不是数字），这段代码就会出错。 - Etheryte

确实如此，我在发帖前几秒钟添加了这个 :) - Michael Wagner

是的，这不是我想要的，但它确实正确地呈现了视觉效果。稍后我会给你点赞，但我希望有人能提供一个真正的解决方案。 - user12861

我觉得没有真正的解决方案；）我还在努力，但它并不像应该的那样工作。 - Michael Wagner

Answer 3

这是我能得到的最接近的结果：

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  }
body {
  padding: 10px;
  }
body:hover {
  background: blue;
  transition: all 0.2s ease;
  }
.one {
  border-color: red;
  border-style: solid;
  border-left-width: 2px;
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-right-width: 0;
  background: #FFF;
}
.two {
  background: #FFF;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  outline: 2px solid green;
  z-index: 2;
}
.three {
  background: #FFF;
  border-color: green;
  border-style: solid;
  border-left-width: 0;
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  padding: 2px;
  margin-left: 2px;
  z-index: 10000;
  outline: 2px #FFF solid;
}

<span class="one">1</span><span class="two">2</span><span class="three">3</span>

也可以使用多个伪元素和绝对定位来实现，但没有像您需要的解决方案。这是由于 XML（HTML 是 XML 的一种）的类型，两个元素不得重叠。

- Michael Wagner

Answer 4

这是一个纯CSS的解决方案：

span {
  font: 1em monotype;
  letter-spacing: 0.3em;
  height: 1em;
  vertical-align: middle;
}

span:before {
  content: "";
  width: 1.5em;
  padding: 0.5em;
  height: 1em;
  position: absolute;
  margin-top: -0.4em;
  margin-left: -0.5em;
  border: 4px solid red;
}

span:after {
  content: "";
  width: 2em;
  height: 1.2em;
  margin-left: -2.5em;
  position: absolute;
  border: 4px solid green;
}

<span>1 2 3</span>

- Rick Hitchcock

Answer 5

例子：margin-xxxx 的负值

.red {
  border-style: solid;
  border-color: red;
  padding: 4px;
  width: 30px;
  display: inline-block;
}
.green {
  border-style: solid;
  border-color: green;
  margin-left: -20px;
  width: 15px;
  z-index: -1;
  display: inline-block;
}

<div>
  <div class="red">1 2</div>
  <div class="green">3</div>
</div>

我做的事情：我创建了两个内联块（同一行），使用负边距将3个块放在2个和1个块上，并将它们全部放在一个叠加层div中。

- user4431269

Answer 6

这里有一个CSS解决方案，适用于不同大小的水平和垂直内容，并且不使用定位。它使用CSS边框以及box-shadow来创建多个边框。然后在div上使用CSS display:table-cell。使用CSS表格样式来创建div之间的关系有几个好处。如果div包含各种数量的内容，则每个div的垂直高度将匹配，并且可以调整整体大小（流体％或固定像素）。JSFiddle：http://jsfiddle.net/TalkingRock/da5b7h5L/。

.table {
  display: table;
  width: 80%;
}
.table-row {
  display: table-row:
}
div {
  display: table-cell;
  margin: 0;
}
.right {
  border-top: 2px solid red;
  border-right: 0px solid red;
  border-bottom: 2px solid red;
  border-left: 2px solid red;
  padding: 4px;
  box-shadow: 0px 0px 0px 2px red;
}
.center {
  padding: 4px;
  border-top: 2px solid green;
  border-right: 0px solid green;
  border-bottom: 2px solid green;
  border-left: 2px solid green;
  box-shadow: 2px 0px 0px 2px red;
}
.left {
  border-top: 2px solid green;
  border-right: 2px solid green;
  border-bottom: 2px solid green;
  border-left: 0px solid green;
  padding: 7px;
}

<div class="table">
  <div class="table-row">
    <div class="right">
      Here is a line of text
    </div>
    <div class="center">
      <p>Paragraph 1 - Pellentesque habitant morbi tristique.</p>
      <p>Paragraph 2 - Maecenas semper facilisis diam. Phasellus placerat ante vitae dolor ornare sodales.</p>
    </div>
    <div class="left">
      <img src="http://i.imgur.com/abMA5gE.gif" />
    </div>
  </div>
</div>

- Talkingrock