Html 将两个div并排放置后，右侧的一个位于底部

我似乎不明白为什么这两个女主角不在一起

现在，右边的div位于右上角，右边的div位于它的正下方&向右对齐

.quotes{
背景色：#ebeaeb；
显示：块；
}
@介质（最小宽度：1366px）{
.引用{
宽度：1280px；
}
.ipad{
宽度：55%；
}
}
@介质（最小宽度：1024px）和（最大宽度：1365px）{
.引用{
宽度：992px；
}
.ipad{
宽度：70%；
}
}
@介质（最小宽度：768px）和（最大宽度：1023px）{
.引用{
宽度：766px；
}
.ipad{
宽度：90%；
}
}
.ipad部门{
显示：内联块；
宽度：50%；
背景：#777；
填充物：5px；
}
.信用卡部{
显示：内联块；
垂直对齐：顶部；
背景：黄色；
宽度：49%；
填充物：5px；
}

免费试用Hubdoc
免费试用Hubdoc

自动提取

关键数据来自
账单


声明
发票


收据

您的

太宽，很可能是因为您的填充为5px。您可以将填充物粘贴在子级别div中以缓解问题

---

提示：在浏览器中使用F12开发工具（根据浏览器的不同，可能会有所不同，因此您可以突出显示部分并检查显示元素精确大小的实际boxmodel结果。

要完成此操作，您需要使用

浮动

或绝对定位

下面是一个使用

float

的示例（填充也会增加元素的宽度，因此您需要使用

box size:border box

或

calc

，我使用了

box size:border box

）：

.quotes{
背景色：#ebeaeb；
显示：块；
}
@介质（最小宽度：1366px）{
.引用{
宽度：1280px；
}
.ipad{
宽度：55%；
}
}
@介质（最小宽度：1024px）和（最大宽度：1365px）{
.引用{
宽度：992px；
}
.ipad{
宽度：70%；
}
}
@介质（最小宽度：768px）和（最大宽度：1023px）{
.引用{
宽度：766px；
}
.ipad{
宽度：90%；
}
}
.ipad部门{
浮动：左；
框大小：边框框；
宽度：50%；
背景：#777；
填充物：5px；
}
.信用卡部{
浮动：对；
框大小：边框框；
垂直对齐：顶部；
背景：黄色；
宽度：50%；
填充物：5px；
}

免费试用Hubdoc
免费试用Hubdoc

自动提取

关键数据来自
账单


声明
发票


收据

我知道你收到了你想要的结果，但我相信你必须理解为什么会发生这种情况

默认显示为块，这意味着无论您分配的宽度如何，它都将下降到自己的行。我建议为其显示一个内联块

您还必须知道，在显示内联块或块浏览器的元素上，它们之间呈现空白。您可以通过几种不同的方式消除空白

我最喜欢的两种方式&最干净的方式：

方法1:

<div id='elm1'></div><!--
--><div id='elm2'></div>

<div id='parent'>
  <div id='elm1'></div>
  <div id='elm2'></div>
</div>

#parent{white-space:nowrap;}
#parent > div{display:inline-block; white-space:normal;}

优点：简单、干净且不需要父元素。
缺点：不能在动态代码中实现&会使您难以阅读代码

方法2:

<div id='elm1'></div><!--
--><div id='elm2'></div>

<div id='parent'>
  <div id='elm1'></div>
  <div id='elm2'></div>
</div>

#parent{white-space:nowrap;}
#parent > div{display:inline-block; white-space:normal;}

#父项{空白：nowrap；}
#父级>div{显示：内联块；空白：正常；}

优点：在css中实现，因此可以在动态代码中实现，并且是干净的。

---

缺点：需要父元素且必须将子空格值重置为正常值。

您好，如果您觉得问题已得到回答，请不要忘记使用箭头将一些答案标记为“有用”，并将其中一个标记为“已接受”使用复选标记。如果您的问题尚未完全回答，请详细说明，以便我们进一步提供帮助！