Question

我已尝试过所有选项，但我无法将div保持在一行。请帮帮我。我附上了代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

请查看

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是此代码的演示 DEMO

这就是为什么它与两个div的比率不会达到60％-40％

@shakira，因为浏览器的大小是100％。现在如果你看到（第一个div的宽度（60％）+第一个div的填充（1％）+第一个div的边距+第二个div的宽度（40个）％）+第二个div的填充（1％）+第二个div的余量）总是超过100％。所以接下来的div会说明为什么它不起作用，你需要调整这些宽度。

Answer 2

你有一个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>

Answer 3

您可以使用以下解决方案并根据您的需要进行修改。如果您想要更深入的了解，我们会问here同样的问题。

这可以帮助你：

Div 1 - 在右侧

.showdetailsleft 
{
  float: right;
  width: 200px;
}

Div 2 - 在Div 1的左侧，覆盖整个可用区域

.showdetailsright
{
  float: left;
  margin-right: 200px;
}

希望这可以帮助你。

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

3 个答案: