在MaterializeCSS中垂直并排对齐列

基础概念

MaterializeCSS 是一个现代响应式前端框架，基于 Google 的 Material Design 规范。它提供了一系列 CSS 类和 JavaScript 插件，用于快速构建美观且功能丰富的网页。

垂直并排对齐列的优势

响应式设计：MaterializeCSS 的列布局能够自适应不同的屏幕尺寸，确保在不同设备上都能良好显示。
灵活性：可以轻松地调整列的宽度和间距，以适应不同的设计需求。
一致性：遵循 Material Design 规范，确保设计的一致性和专业性。

类型

在 MaterializeCSS 中，列（columns）主要通过 .col 类来实现。垂直并排对齐列通常使用栅格系统（grid system），通过 .row 和 .col 类的组合来实现。

应用场景

垂直并排对齐列常用于构建仪表板、产品展示、信息卡片等需要并排显示内容的页面。

示例代码

以下是一个简单的示例，展示如何在 MaterializeCSS 中垂直并排对齐列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MaterializeCSS Columns Example</title>
    <!-- MaterializeCSS CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
    <!-- MaterializeCSS JS and Icons -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col s12 m6 l4">
                <div class="card">
                    <div class="card-content">
                        <span class="card-title">Card 1</span>
                        <p>This is the content of card 1.</p>
                    </div>
                </div>
            </div>
            <div class="col s12 m6 l4">
                <div class="card">
                    <div class="card-content">
                        <span class="card-title">Card 2</span>
                        <p>This is the content of card 2.</p>
                    </div>
                </div>
            </div>
            <div class="col s12 m6 l4">
                <div class="card">
                    <div class="card-content">
                        <span class="card-title">Card 3</span>
                        <p>This is the content of card 3.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

解决常见问题

问题：列没有正确对齐

原因：

缺少 .row 类：确保每个列容器都包裹在 .row 类中。
列宽度设置错误：确保每个 .col 类的宽度设置正确，例如 s12 m6 l4 表示在小屏幕上占满一行，在中等屏幕上占一半，在大屏幕上占三分之一。

解决方法：检查并确保 .row 和 .col 类的使用正确。

问题：列之间的间距不正确

原因：

CSS 样式冲突：可能存在其他 CSS 样式影响了 MaterializeCSS 的默认样式。
未正确引入 MaterializeCSS 文件：确保正确引入了 MaterializeCSS 的 CSS 和 JS 文件。

解决方法：

检查并确保没有其他 CSS 样式冲突。
确保正确引入了 MaterializeCSS 的 CSS 和 JS 文件。

参考链接

MaterializeCSS 官方文档

通过以上内容，你应该能够理解如何在 MaterializeCSS 中垂直并排对齐列，并解决一些常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

在MaterializeCSS中垂直并排对齐列

、、、

在此示例中，通常如何垂直对齐“居中”按钮： <div class="row"> <h1>Foo</h1> </div>

浏览 24提问于2020-05-03得票数 0

回答已采纳

1回答

Div下的CSS Div

、、、

我在设置一个div以显示在另一个div下时遇到了很多麻烦(就像他们通常做的那样)。 margin: 0 auto;} 但是，即使添加width:100%或更改显示类也不会使两个div垂直显示，它们是并排显示的。

浏览 3提问于2016-03-21得票数 0

4回答

只有相对属性的div中的右对齐元素

、

这两个元素都保存在div元素中，我希望将图像与div元素中的左侧对齐，将无序列表与div元素的右侧对齐。那我该怎么做？第二，我只愿意使用相对财产。不是绝对的！由于我希望在div元素的中间垂直对齐列表，并且位置是绝对的，所以我无法使用垂直对齐属性对齐列表。如果我用的是浮点数，情况也是一样的。我无法将列表垂直对齐到中间，这是我想要做的。

浏览 7提问于2016-02-09得票数 0

回答已采纳

1回答

物化CSS数据-错误属性

、

我试图用物化CSS对我的表单进行样式化，data-success和data-error属性有一点不方便:属性中的单词似乎显示在垂直列中，而不是水平地显示在输入字段行下面。下面是一个JS小提琴示例：。在有些拥挤的表单中，可能需要这样一个冗长的错误属性，红色文本与其他表单字段重叠。有没有办法绕过这一点，或者这是MaterializeCSS的限制？

浏览 1提问于2015-08-05得票数 2

回答已采纳

3回答

在右边对齐列表中的项目

、、

我一直在搜索如何在div的右边对齐列表中的项。li {} 但它使这两个项目在正确的一面，但不是在另一个上面，如我所希望的。我得到的是，如您所见，option1和option2在右边，但不是垂直对齐的。

浏览 2提问于2013-12-23得票数 0

回答已采纳

1回答

如何向QSplitter添加布局？

、、

我有一个垂直分离器，有3列。在第二个按钮中，我想让一些按钮水平地对齐，在这些按钮下面有一个ListWidget。问题是，我希望在拆分器的第二列中有一个垂直布局(VBoxLayout)来对齐列表上方的按钮。但是拆分器只接受addWidget(.)，而不接受addLayout(.)。因此，我不能在拆分器中添加VBoxLayout。怎样才能正确地将按钮放在拆分器内部的ListWidget上方？

浏览 2提问于2018-11-19得票数 1

回答已采纳

3回答

垂直对齐:中间不工作图标，跨度在锚内。

、

现在，我想垂直对齐列表中锚内的图标和span元素。我也尝试在锚元素上设置垂直对齐，但是没有运气。

浏览 5提问于2016-12-06得票数 3

回答已采纳

1回答

你知道为什么这两个盒子是错开的吗？

、、、、

在下面的小提琴中，我有两个相同大小的内联块DIVs。它们将overflow设置为auto，并在其中包含内容。第二个DIV有一个相当大的Y偏移量，但我不知道为什么。它们应该是紧挨着的。

浏览 0提问于2012-07-27得票数 0

回答已采纳

1回答

如何在MaterializeCSS中垂直对齐复选框及其标签

、、、

有什么方法可以在MaterializeCSS中垂直对齐(中间)复选框及其标签吗？ -我希望复选框相对于蓝色框垂直居中。如果您从小提琴中移除物化，并使用普通的HTML/CSS，它就能工作。谢谢你！！

浏览 0提问于2018-01-23得票数 1

回答已采纳

1回答

在引导中垂直居中对齐列

、、、

我尝试了十几种方法在bootstrap中垂直居中对齐列，但都不起作用。我的问题是我不知道列的高度。我可以使用flexbox吗？它嵌入在Bootstrap 3中了吗？

浏览 2提问于2016-02-12得票数 3

回答已采纳

1回答

react-bootstrap对齐-中间不适用于列

、

根据bootstrap documentation，我应该能够通过使用align-middle类来垂直对齐列中的某些内容。我用typescript，react-bootstrap写了这段代码，align-middle对我不起作用。level</h1> </Row> </Style> )}; 我希望

浏览 9提问于2020-12-25得票数 0

回答已采纳

2回答

列表中垂直对齐的文本和图像

、、、

有没有一种方法可以垂直对齐列表中的文本和图像？我需要的文字是在中心点之间的图像在一边。谢谢:)

浏览 1提问于2010-04-27得票数 1

回答已采纳

2回答

我试图在MaterializeCSS网站中创建一些类似于这个图形的图形，但我找不出它来自哪里，我查看了整个MaterializeCSS网站，它不是框架的一部分，我在代码中找不到他们使用的是什么我对那些小盒子特别感兴趣：(https://ibb.co/7vZVjZ8) Small square graphics 示例网站可在此处找到：https://themes.materializecss.com&#

浏览 18提问于2020-07-24得票数 3

回答已采纳

1回答

在bootstrap3旋转木马中在移动视图中显示一列

、、、

我已经创建了一个使用bootstrap3循环显示产品的旋转木马，在一个项目中有4列。我正面临着在移动视图中显示这些项目的问题。由于我使用了旋转木马项中的列，所以引导程序在移动视图中垂直对齐列，但是我只需要在移动视图中同时显示一个产品。这是相同的代码。

浏览 1提问于2014-07-23得票数 3

4回答

CSS:如何将列表元素与左对齐的文本对齐？

我试图在div中对齐列表，但将文本保持左对齐。因此，我希望所有的子弹垂直排列(左对齐)，但是整个列表本身应该位于中间，如下例中的段落所示：.container { width: 600px; padding: 2em; background:

浏览 3提问于2017-04-06得票数 1

回答已采纳

1回答

如果两个浮动DIVs由于容器宽度不足而垂直堆叠，如何检测(和样式)？

、

我在一个响应式的设计中实现了一种工具栏。工具栏部分被实现为浮动DIVs，它们并排并排，在它们之间有很好的间隔。然而，在较低宽度的设备上，DIVs是垂直堆叠的，因为空间越来越少。这当然是件好事，但有一个小问题:它们相互堆叠在一起，没有垂直间隙，或者垂直间距是原来的两倍(我是在容器条上使用填充，还是在每个工具栏DIV部分使用空白)。这两个人看起来都不太好。我如何在考虑到可能的垂直叠加的

浏览 3提问于2015-06-17得票数 0

回答已采纳

1回答

如何在JavaScript (或CSS)中同样对齐使用循环、数组和附加子程序创建的两个垂直列？

、、、、

我有一系列的课程，它们被放在输入复选框中，后面跟着标签。从这里开始，我使用一个if语句在每隔一次迭代之后添加中断，以创建我的列。我的问题是让第二列垂直对齐。我只想使用JS而不是CSS，但我对两者都是开放的。由于我的问题有多个部分，我不知道用什么关键字来缩小对齐列的搜索范围，在循环中使用.createElement创建2列并在JavaScript中垂直对齐列，所以如果在另一个地方回答了这个问题，可以随意删除一行

浏览 0提问于2016-10-09得票数 0

回答已采纳

2回答