我已经尝试了每一个选项,但我无法保持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>
嗨,夏奇拉,这就是你想要的解决方案
请查看
.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>
是这段代码的演示
为什么div
不能使用60%-40%的比例@shakira这是因为浏览器的大小是100%。现在如果你看到(第一个div的宽度(60%)+第一个div的padding(1%) +第一个div的margin +2stdiv的宽度(40%)+2stdiv的padding(1%) +2stdiv的margin)总是大于100% 所以下一个div会往下显示这就是为什么它不起作用你需要调整宽度
你有一个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>
您可以使用下面的解决方案并根据您的需要对其进行修改。如果你想了解更多,这里也有同样的问题。
这应该能帮到你:
Div 1——右侧
.showdetailsleft
{
float: right;
width: 200px;
}
Div 2——位于Div 1的左侧,覆盖整个可用区域
.showdetailsright
{
float: left;
margin-right: 200px;
}