Question

我在尝试的新网站上有以下“录音盒”代码：

html {
  background: red;
}
.mybox {
  margin-top: 20px;
  position: relative;
}
.myboxtape {
  background: blue;
  color: #FFFFFF;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  font-size: 20px;
  box-shadow: 0px 7px 8px -2px rgba(51, 51, 51, 0.62);
}
.myboxtape::before {
  content: '';
  display: block;
  position: absolute;
  background-color: rgba(220, 212, 176, 0.70);
  height: 125px;
}
.myboxtape::before {
  left: 45%;
  top: -60px;
  width: 28px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

<div class="mybox">
  <p class="myboxtape">
    My Title
    <br>This is some content!
  </p>
</div>

问题是我想将内容文本放在<p>标记和<h2>标记中，但是当我这样做时，文本跳出其下方的框，我无法理解为什么？

Answer 1

工作解决方案：将段落更改为div

html {
  background: red;
}
.mybox {
  margin-top: 20px;
  position: relative;
}
.myboxtape {
  background: blue;
  color: #FFFFFF;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  font-size: 20px;
  box-shadow: 0px 7px 8px -2px rgba(51, 51, 51, 0.62);
}
.myboxtape::before {
  content: '';
  display: block;
  position: absolute;
  background-color: rgba(220, 212, 176, 0.70);
  height: 125px;
}
.myboxtape::before {
  left: 45%;
  top: -60px;
  width: 28px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

<div class="mybox">
  <div class="myboxtape">
    <h1>My Title</h1>
    <br><h2>This is some content!</h2>
  </div>
</div>

Answer 2

<p>标记不能包含块级元素，请参阅： Why <p> tag can't contain <div> tag inside it?

在代码上运行html验证器通常会发现这类问题。

Answer 3

<p>代码并非旨在容纳其他元素。如果你将myboxtape更改为div，你应该能够将“我的标题”放在一个h2中并且“这是一些内容！”在p。

为什么我不能在不打破这些内容的情况下放置标签？

3 个答案: