如何将两个div标签垂直保持在一行中？

debugcn 发表于 Dev

夏奇拉

我已经尝试了所有选项，但无法将div放在一行中。请帮助我。我已经附上了代码

.showdetailsleft {
  margin: 1%;
  width: 60%;
  padding: 1%;
  float: left;
}

.showdetailsright {
  width: 40%;
  display: inline-block;
  padding: 1%;
  float: right;
}

<div class="showdetailsleft">
  <label>Course Information</label>
  <hr class="divider">
  <p>Course Summary</p>
  <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
  <div class="showdetailsright">
    <label>How to Enroll</label>
    <hr class="divider">
    <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
  </div>
</div>

雷切尔·加伦（Rachel Gallen）

您在另一个div中包含一个div，这就是为什么它永远不能垂直对齐顶部（右div）的原因。我调整了宽度以考虑填充和边距。

body {
  margin: 0!important;
  padding: 0!important;
}
.showdetailsleft {
  display: inline-block;
  margin: 1%;
  width: 56%;
  padding: 1%;
  float: left;
  vertical-align: top;
  position: relative;
}
.showdetailsright {
  margin-top: 1%;
  width: 38%;
  display: inline-block;
  vertical-align: top;
  padding: 1%;
  position: relative;
}

<div class="showdetailsleft">
  <label>Course Information</label>
  <hr class="divider">
  <p>Course Summary</p>
  <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
</div>
<div class="showdetailsright">
  <label>How to Enroll</label>
  <hr class="divider">
  <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。