Question

所以我将这些文本div分别包含在上面的内容中，并且出于某种原因，只要其中有<p>标记文本，它们就会全部破坏。从我的角度来看，我附上了我的代码以及代码片段。

＆＃13;

/*description under images*/

#inline-2 {
  display: inline-block;
  background-color: green;
}

.discription-wrap {
  width: 100%;
  height: 240px;
  margin-top: 5px;
}

.dental-2 {
  width: 290px;
  height: 240px;
  margin-left: 310px;
  margin-bottom: 20px;
}

.appliances-2 {
  width: 290px;
  height: 240px;
  margin-left: 57px;
}

.timber-2 {
  width: 290px;
  height: 240px;
  margin-left: 60px;
}

.dental-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.appliances-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.timber-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

＆＃13;

<!--description under images-->
<div class="discription-wrap">
  <div class="dental-2" id="inline-2">
    <p>Tecco is a supplier of Dental products ranging from equipment, disposables to bone graft material. We offer a one stop shop for all your dental product requirements. Our main markets are East &amp; West Africa.
    </p>
  </div>

  <div class="appliances-2" id="inline-2">
    <p>If you are looking to enter the Chinese market but are worried about the risks involved, the Tecco Group team can assist. With our specialized product sourcing team, it is easy for you to find the products you are looking for. We assist with finding
      your product, quality control, shipping and everything in between.
    </p>
  </div>

  <div class="timber-2" id="inline-2">
    <p>Tecco sources New Zealand Radiata Pine for it's clients in China. Typically used in high end furniture. Clears, Kiln dried, rough sawn.
    </p>
  </div>
</div>

＆＃13;

here is a sample from my view

Answer 1

将vertical-align: top添加到#inline-2 - 默认情况下，内联块沿其基线对齐，在这种情况下是其中的最后一行文字。

/*description under images*/

#inline-2 {
  display: inline-block;
  background-color: green;
  vertical-align: top;
}

.discription-wrap {
  width: 100%;
  height: 240px;
  margin-top: 5px;
}

.dental-2 {
  width: 290px;
  height: 240px;
  margin-left: 310px;
  margin-bottom: 20px;
}

.appliances-2 {
  width: 290px;
  height: 240px;
  margin-left: 57px;
}

.timber-2 {
  width: 290px;
  height: 240px;
  margin-left: 60px;
}

.dental-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.appliances-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.timber-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

<!--description under images-->
<div class="discription-wrap">
  <div class="dental-2" id="inline-2">
    <p>Tecco is a supplier of Dental products ranging from equipment, disposables to bone graft material. We offer a one stop shop for all your dental product requirements. Our main markets are East &amp; West Africa.
    </p>
  </div>

  <div class="appliances-2" id="inline-2">
    <p>If you are looking to enter the Chinese market but are worried about the risks involved, the Tecco Group team can assist. With our specialized product sourcing team, it is easy for you to find the products you are looking for. We assist with finding
      your product, quality control, shipping and everything in between.
    </p>
  </div>

  <div class="timber-2" id="inline-2">
    <p>Tecco sources New Zealand Radiata Pine for it's clients in China. Typically used in high end furniture. Clears, Kiln dried, rough sawn.
    </p>
  </div>
</div>

文字div不会直接排队

1 个答案: