html - 如何让两个div标签垂直排成一行？

Question

我已经尝试了所有选项，但我无法将 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>

Answer 1

嗨，夏奇拉，这是你想要的解决方案

请检查一下

.wrapper{
    display:block;   
}
.showdetailsleft{   
	margin:1%;
	width:55%;
	padding:1%;
    float:left;
}
.showdetailsright{
	width:39%;	
	padding:1%;
    float:right;
}

<div class="wrapper">
    <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>
</div>

这是这段代码的演示 DEMO

这就是为什么它不能与两个 div 的 60%-40% 比率一起工作

@shakira 这是因为浏览器的大小是 100%。现在如果你看到 (第一个 div 的宽度 (60%) + 第一个 div 的填充 (1%) + 第一个 div 的边距 + 第二个 div 的宽度 (40%) + 第二个 div 的填充 (1%) + 第二个 div 的边距 ) 总是超过 100%。所以下一个 div 会出现，这就是它不起作用的原因，您需要调整这些宽度。