HTML是否可以设置第二类继承主id？

Question

我是否可以设置第二个类继承主类ID？

Codepen：https://codepen.io/jayvicious/pen/EXardz

＆＃13;

＆＃13;

.productholder {
  width: 50%;
  display: inline-block;
}

#content2p {
  padding-top: 19px;
  padding-bottom: 40px;
  margin-left: 6cm;
  width: auto;
}

.bookingFormHeader {
  display: inline-flex;
  background-color: lightgrey;
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

＆＃13;

<div id="content2p">

  <img class="productholder" src="http://via.placeholder.com/662x442.png">
  <p class="bookingFormHeader">Test Test</p>

</div>

＆＃13;

＆＃13;

＆＃13;

说明： -

我已经设置了一个ID为content2p的容器。在这里，我想并排两个班级。第一堂课productholder工作正常。我唯一的问题是bookingFormHeader。它在底部缩进，我想使它与下面的示例输出相同：

预订实际上是一个带边框的表格：

通过将显示更改为以下内容，我尝试了很多方法： -

inline-block flex table inline-table

然而，我没有运气，有什么元素我不知道吗？ 提前欣赏。

Answer 1

这就是你追求的吗？请根据您的喜好调整边距和宽度。

＆＃13;

＆＃13;

#content2p {
  padding-top: 19px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bookingFormHeader {
  background-color: lightgrey;
  width: 100px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

＆＃13;

<div id="content2p">

  <img class="productholder" src="http://www.placehold.it/80">
  <p class="bookingFormHeader">Test Test</p>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您还可以使用id

中的类

<style>
#id
{
****some style
}
.class
{
**codes
}

像这样的HTML

<div id="id>
<div class="class"
</div>
</div>