html - 具有多列的 Magento 页脚

标签 html css css-float web-frontend magento-2.0

我在 Windows Server 2016 上的 wamp 上使用 magento 社区版 2.2.0。

我想使用 3 列中的链接自定义页脚(桌面 3 列,在移动设备上观看时,它应该像 bootstrap div 一样显示在另一列下方的单列中)。请引用图片以查看我在寻找什么:

Magento Footer with Multiple Columns

在我提到的几乎所有教程中,每个人都说要隐藏默认页脚,添加一个新 block (并在那里输入链接),创建一个类型为“CMS Static Block”的小部件,将其放在“CMS Footer Links”中并选择先前创建的 block 。

问题是所有创建的链接(使用 html )都一个接一个地出现在另一个下面。我的意思是单列下 9 行中的所有 9 个链接。如何将其变成 3 列,如图所示。

请指教....

最佳答案

您可以使用不同的 HTML/CSS 技术来实现这一点。 float 或内联 block 将是首选

float 示例

#footer-columns div{
  float:left;
  width: 33%;
}

#footer-columns div a{
  display:block;
}
<div id="footer-columns">
	<div>
		<a>Link 1</a>
		<a>Link 2</a>
		<a>Link 3</a>
	</div>
	<div>
		<a>Link 4</a>
		<a>Link 5</a>
		<a>Link 6</a>
	</div>
	<div>
		<a>Link 7</a>
		<a>Link 8</a>
		<a>Link 9</a>
	</div>
	<div style="clear:both">
</div>

关于html - 具有多列的 Magento 页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46949093/

相关文章:

javascript - for 循环中的 HTML 表 TD 未正确生成

javascript - 绘制多个彼此相邻的旋转图像

css - 如何使 float 的 div 相对于其容器的高度垂直对齐

html - 两个带文本的 div 框 1 和 2,位于第三个 div 框内。有时框 1 中的文本比框 2 中的文本长

css - div 中 div 的溢出行,滚动不是换行

javascript - 使用 Javascript 打开和关闭弹出窗口

javascript - Fancybox 描述框在窗口调整大小时保持大小

css - 部分图像表现为 div HTML CSS

css - 100% div 和固定大小的 div 从此过着幸福的生活?

css - Bootstrap 4 Alpha 6 右拉等效