html - 我如何使用 div column-9 和 div column-3 上的另一个子内容创建轮播幻灯片

Question

如何在 div 类第 9 列上创建轮播幻灯片，并在同一行的 div 类第 3 列上创建横幅。我想实现在 div class-col-9 上有一个旋转木马幻灯片，并且在与旋转木马同一行的 div class-col-3 上也有横幅。我在 div 类 col-9 上的轮播幻灯片和 div 类 col-3 上的横幅在同一列上出现问题，相反，我在 div 类 col-3 中的横幅在轮播下方，这是不应该的。我正在为一位客户做这件事，他说他想要一个与 naijaloaded.com.ng 非常相似的博客

我曾尝试将我还添加了一个 div 类 col-9 的旋转木马幻灯片与我给了 div 类 col-3 的横幅广告放在同一列中，但相反，横幅广告开始了另一行与轮播幻灯片在同一列

Answer 1

没有看到你的代码，我不确定我是否能准确地告诉你你能做什么，但这是我从你的问题中得到的:

1. 您有一行被分成 2/3 用于轮播，1/3 用于横幅。
2. 您的 2/3 列将 1/3 列向下推，但您希望它们并排显示。

我建议这样做的一种方法是在两列上使用 css 属性 float: left，看看是否可行。

这很可能发生，因为默认情况下，行和列周围有浏览器呈现的边距。如果您的列周围有边框，这也会偏移它们的位置，这样它们就不会彼此相邻显示，在这种情况下，您最好使用 display: grid 或设置像这样的边框:

.2/3 column {
  border-width: 2px;
  border-style: solid;
  border-color: #000;
}

.1/3 column {
  border-width: 2px 2px 2px 0;
  border-style: solid;
  border-color: #000;
  margin-left: -2px
}

希望对您有所帮助!