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>

这大约是我希望它看起来像：

enter image description here

Answer 1

有可能，但编码风格不是很好。如果更改文本，则还必须更改.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>

Answer 2

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

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）引起的，两个元素不能重叠。

Answer 3

这是一个纯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>

Answer 4

Exmaple margin-xxxx的负值

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我做了什么：我制作了2个内联块（同一行），使用负边距来获得3个2和1个块并将所有1个叠加div放入。

Answer 5

您希望故意破坏XHTML中的XML格式。并让浏览器正确解释元素的边框？在<b class="red"">1 <u class="green">2</b> 3</u>这样的事情发生在当天很常见，你会发现这种情况更接近于“{1}}。你想要的东西，但现在浏览器现在填补显示中的这些空白，并在添加CSS时强制适当的foratting。所以你不得不做CSS黑客......

很抱歉看起来：第一个类型和：最后一个类型不喜欢被添加到2个类，如.red.green：first-of-type所以我不得不添加它们在课程

中为first和last

（您可以通过查看哪些元素同时具有两种类来找到重叠）

＆＃13;

    	.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;
    	}

＆＃13;

<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>

＆＃13;

Answer 6

这是一个CSS解决方案，它与不同大小的水平和垂直内容保持在一起，并且不使用定位。它使用CSS边框和box-shadow来创建多个边框。然后CSS显示：在div上使用table-cell。

使用CSS表样式在div之间创建关系有几个好处。如果div包含不同数量的内容，则每个div的垂直高度将匹配，并且可以调整整体大小（流量％或固定像素）。

JSFiddle：http://jsfiddle.net/TalkingRock/da5b7h5L/

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

重叠HTML标记

6 个答案: