开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我的2列在Zurb中堆叠。如何并排显示它们？

在Zurb中，可以使用Flexbox来实现并排显示两列。Flexbox是一种用于布局的CSS属性，可以轻松地控制元素在容器中的位置和大小。

首先，确保你的HTML结构中包含一个父容器和两个子元素，每个子元素代表一列。例如：

<div class="parent-container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

接下来，在CSS中为父容器添加Flexbox属性，并设置flex-direction为row，这将使子元素水平排列。同时，可以设置justify-content属性来调整子元素在父容器中的水平对齐方式。

.parent-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

以上代码将使两列并排显示，并且它们之间的间距将根据父容器的宽度自动调整。

如果你想要更多的控制，可以使用flex-grow、flex-shrink和flex-basis属性来调整子元素的大小和比例。

这是一个示例的完整代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    
    .column {
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="parent-container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
</body>
</html>

这样，两列将会并排显示在页面上。你可以根据需要调整列的宽度、高度和样式。

关于Zurb和Flexbox的更多信息，你可以参考以下链接：

相关搜索:Highcharts如何并排显示具有堆叠和未堆叠列的图表我如何根据它们的行堆叠回数据？Python 我的按钮在我的主页窗口中并排显示，但它们显示在中间。我怎么才能让他们升到更高的位置？在R中并排和垂直堆叠的箱形图为什么我的视频轮播堆叠视频，而不是在幻灯片中显示它们？我的列没有在Safari中显示(但它们在Chrome，Explorer，Firefox中)？在Xcode中的Instruments中显示的Malloc内存泄漏是什么，我如何修复它们？在java中并排显示磁盘和URL中的图片可堆叠的项目以及如何更改它们的数量以便使用插值数据显示？我有两个文本，我希望它们在css中彼此显示如何让图标中的图片和文本并排显示？如何改变堆叠条形图在R中的堆叠位置？在python pandas中，如何在一个csv文件中并排堆叠(每次迭代)列中的数据帧？如何让我的图表元素展开？它们目前都堆叠在一起有没有办法在QTextEdit中显示堆叠的文本？我有3张图片，我想用subplot将它们显示在1张图中，但它们太小了，我如何才能让它们变得更大更清晰？在R ggplot中，我如何堆叠两个点图？我如何在数组中导航，检查它们之间的所有元素，如果它们满足条件，则显示它们？我在我的Laravel模型中有多态关系。如何在Nova中实现它们？如何显示我在代码中完成的任务？

相关搜索:

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

有帮助

没帮助

相关·内容

TwentyTwenty：一个图片特效Jquery 插件

继续发一篇水文。这个Jquery 插件值得推荐——虽然我不清楚在什么情况下适用，但你知道有这个东西，在需要的时候就能用上了——收集多点资源总不是坏事。插件的效果具体我也不会说，直接看官网demo吧。简介官方网站& demo：http://zurb.com/playground/twentytwenty 运行必备：jquery、jquery.event.move（一个用于在移动设备上支持触摸事件的类）浏览器兼容：IE9 + ，其他现代浏览器 TwentyTwenty的工作原理是在彼此的顶部堆叠的两个

08

合理使用CSS框架，加速UI设计进程

现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI，我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新，现在网站不仅仅是只能显示信息，它们同样也可以拥有有趣的动画、多样的布局和互动的元素。而其中，这些大部分都是由CSS来实现的。

02

十五种加速设计开发的CSS框架

如今我们所浏览的网站，除了基本的信息展示之外，大多数具有生动的动画、多样的布局、以及诱人的互动元素，多要归功于CSS创新技术的实现。截至到去年年底，Flexbox已经被运用到了Google Chrome的83%加载页面上(请参阅：https://www.chromestatus.com/metrics/feature/timeline/popularity/1692)，人们从中能够看到包括CSS写入模式(Writing-Mode)、移动动画、单页面网站、可变字体、以及滚动捕捉等方面的新趋势。

03

15 个优秀的响应式 CSS 框架

响应式 Web 设计旨在为各种设备（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优秀的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并免费的。

01

干货！直观地解释和可视化每个复杂的DataFrame操作

大多数数据科学家可能会赞扬Pandas进行数据准备的能力，但许多人可能无法利用所有这些能力。操作数据帧可能很快会成为一项复杂的任务，因此在Pandas中的八种技术中均提供了说明，可视化，代码和技巧来记住如何做。

02

如何在 Python 中将作为列的一维数组转换为二维数组？

数组是编程中的基本数据结构，使我们能够有效地存储和操作值的集合。Python作为一种通用编程语言，提供了许多用于处理数组和矩阵的工具和库。特别是，在处理表格数据或执行需要二维结构的操作时，将 1−D 数组转换为 2−D 数组的能力是一项基本技能。

04

Foundation：高级的响应式前端框架

对于前端框架，Jeff 了解Bootstrap 甚于这个Foundation（貌似在写该文之前还没听说过Foundation）。所以，今天在这里恶补一下，介绍一下这个高级的响应式前端框架（The most advanced responsive front-end framework in the world）——Foundation 框架。简介 Foundation 前端框架官方地址：http://foundation.zurb.com/ Foundation 是一款开源的前端框架，我们可以使用它快速创

09

R文档沟通｜Dashboards入门（2）

请注意，第一行文本（Coluumn 1）下的一系列破折号是第二级标题的另一种 Markdown 语法形式，即

03

Pandas统计分析-分组->透视->可视化

数据分组聚合运算聚合 ‘ 飞行综合 flights = pd.read_csv('data/flights.csv') 1 显示部分数据 2 按照AIRLINE分组，使用agg方法，传入要

01

Pandas 数据对比

df.compare() 和s.compare() 方法使您可以分别比较两个DataFrame 或 Series，并总结它们之间的差异。V1.1.0 中添加了此功能。

06

Bootstrap响应式前端框架笔记一——强大的栅格布局

Bootstrap是一款HTML，Css和JavaScript开发框架，其也支持开发者进行自定义构建，开发者也可以只打包自己需要的功能模块使用。Bootstrap的中文网址如下：

01

最全面的Pandas的教程！没有之一!

Pandas 是基于 NumPy 的一个开源 Python 库，它被广泛用于快速分析数据，以及数据清洗和准备等工作。它的名字来源是由“ Panel data”（面板数据，一个计量经济学名词）两个单词拼成的。简单地说，你可以把 Pandas 看作是 Python 版的 Excel。

06

如何利用动效提升用户体验

如何利用动效提升用户体验动画可以讲述故事。不是很长很复杂而是很简单的故事，而像是 "嘿，你现在要看看这个！" 或 "哇，你竞争成功了！"。然而，动效的目的不是娱乐用户，而是帮助他们理解发什么什么事，或者如何有效的使用你的软件。在Zurb的叙述中很清晰的表明了：我们不再是设计静态的屏幕，用户将会从我们的设计中看到实际的内容。动效可以广泛用于统一美感和功能的平衡，它可以影响行为、沟通状态、引导用户和帮助他们查看自己行为的结果。下面是一些例子，是在一些方面可以增加动效改进UI的经验：加载不再无聊如果

【管理统计】Minitab下载:Minitab 21下载安装详细激活教程Minitab下载安装包

1、将Minitab下载下来，并解压到当前文件夹中，点击其中的f4-minitab17-setup.exe应用程序，进入安装向导界面，接着点击下一步，来到许可协议界面。

04

【Flutter】堆叠式卡轮播

作为移动应用程序开发人员，我们有时需要制作滑动的，动画的背景图像轮播。但是，有时候，我们需要制作一张滑动卡片传送带，其中包含一些具有各种背景颜色，图像或渐变的信息。

03

我和前端的那些事儿

然，像我这种没有系统学习过的人来说，而且圈子也比较小众，第一次听到这种词是比较陌生的。但好在语文功底不错，顾名思义，结合实际场景，大概也能猜出一二。

03

『数据可视化』一文掌握Pandas可视化图表

今天简单介绍一下Pandas可视化图表的一些操作，Pandas其实提供了一个绘图方法plot()，可以很方便的将Series和Dataframe类型数据直接进行数据可视化。

04

一文掌握Pandas可视化图表

今天简单介绍一下Pandas可视化图表的一些操作，Pandas其实提供了一个绘图方法plot()，可以很方便的将Series和Dataframe类型数据直接进行数据可视化。

05

SQL注入专项整理（持续更新中）

SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步得到相应的数据信息。（百度百科） SQL注入是Web安全常见的一种攻击手段，其主要存在于数据库中，用来窃取重要信息，在输入框、搜索框、登录窗口、交互式等等都存在注入可能；是否是输入函数无法判断其输入的合法性并将其作为PHP等语言代码来执行，或整体逻辑出现缺陷，或关键字关键命令关键字符没过滤全，包括编码加密命令是否进行了过滤，这些种种环节的防护不严都将导致SQL注入的成功。（本人拙见）

02

因Pandas版本较低，这个API实现不了咋办？

前几天发表了一篇推文，分享了Pandas中非常好用的一个API——explode，然而今天又发生了戏剧性的一幕：因Pandas版本过低系统提示'Series' object has no attribute 'explode'！好吧，好用的东西永远都是娇贵的，这个道理没想到在代码中也适用。所以，今天就以此为题展开拓展分析，再输出一点Pandas干货……

03

CSS属性汇总--(6) 定位属性3

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

02

用 PyQt 打造具有专业外观的 GUI

如果您一直在创建表单以执行将数据输入数据库等操作，那么QFormLayout适合您。此类将小部件布置为两列布局。第一列通常显示描述预期输入的标签，第二列通常包含允许用户输入或编辑数据的输入小部件，例如QLineEdit，QComboBox或QSpinBox。

03

Extjs-lesson6

「效果」：将页面分为了上下左右和中间几个位置更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

02

linux系列之常用运维命令整理笔录

free 命令能够显示系统中物理上的空闲和已用内存，还有交换内存，同时，也能显示被内核使用的缓冲和缓存

04

Matlab入门到放弃（二）、matlab基础知识

——————————————————————————————————修正：打算更四~五篇，之后更simulink相关操作

01

NumPy学习笔记

操作系统：macOS Big Sur (11.6) Anaconda3：2021.05 python：3.7.3 Jupyter Notebook：5.7.8

01

数据导入与预处理-拓展-pandas可视化

关于pandas的可视化的用法还有很多，这里不再拓展，但还是建议使用matplotlib，seaborn等库完成绘图。

02

你可能不知道的「 CSS 容器查询」

背景今天PM过来问我: 蛋总，有些用户反馈他们屏幕太小了 , 需要滑动, 操作不方便。我们的系统能不能改成自适应布局啊? 我顿时虎躯一震：woc, 要把一个迭代了一年多的固定设计的产品，改成自适应布

03

Python数据分析之数据预处理（数据清洗、数据合并、数据重塑、数据转换）学习笔记

参考链接： Python | pandas 合并merge，联接join和级联concat

00

buuctf[强网杯 2019]随便注 1(超详细，三种解法）

联合查询被过滤，只能用堆叠注入了查看有几个字段 1' order by 2#

03

Bootstrap基本入门大全

Bootstrap 是基于 HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。重点的是你要理解这个框架的运行机制，了解了它是怎么运行怎么使用，才能够更加高效的布局页面

可视化图表样式使用大全

Severino Ribecca 是一位平面设计师，也是数据可视化的爱好者，他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景，并且推荐了相应的制作工具。

01

60 种常用可视化图表，该怎么用？

数据可视化的爱好者Severino Ribecca，他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景，并且推荐了相应的制作工具。

01

常用60类图表使用场景、制作工具推荐！

数据可视化的爱好者Severino Ribecca，他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景，并且推荐了相应的制作工具。

02

Bootstrap基本入门大全

Bootstrap 是基于 HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。重点的是你要理解这个框架的运行机制，了解了它是怎么运行怎么使用，才能够更加高效的布局页面。附上中文网站，了解了怎么玩之后就在上面找自己需要的，然后玩起来！！ http://www.bootcss.com

01

原来使用 Pandas 绘制图表也这么惊艳

Pandas 是一种非常流行的数据分析工具，同时它还为数据可视化提供了很好的选择。

05

视觉进阶 | 用于图像降噪的卷积自编码器

在神经网络世界中，对图像数据进行建模需要特殊的方法。其中最著名的是卷积神经网络(CNN或ConvNet)或称为卷积自编码器。并非所有的读者都了解图像数据，那么我先简要介绍图像数据(如果你对这方面已经很清楚了，可以跳过)。然后，我会介绍标准神经网络。这个标准神经网络用于图像数据，比较简单。这解释了处理图像数据时为什么首选的是卷积自编码器。最重要的是，我将演示卷积自编码器如何减少图像噪声。这篇文章将用上Keras模块和MNIST数据。Keras用Python编写，并且能够在TensorFlow上运行，是高级的神经网络API。

01

视觉进阶 | 用于图像降噪的卷积自编码器

在神经网络世界中，对图像数据进行建模需要特殊的方法。其中最著名的是卷积神经网络(CNN或ConvNet)或称为卷积自编码器。并非所有的读者都了解图像数据，那么我先简要介绍图像数据(如果你对这方面已经很清楚了，可以跳过)。然后，我会介绍标准神经网络。这个标准神经网络用于图像数据，比较简单。这解释了处理图像数据时为什么首选的是卷积自编码器。最重要的是，我将演示卷积自编码器如何减少图像噪声。这篇文章将用上Keras模块和MNIST数据。Keras用Python编写，并且能够在TensorFlow上运行，是高级的神经网络API。

04

列表,表格与媒体元素

一.列表　　列表就是信息资源的一种展示形式 1.列表及其应用　　 1)无序列表　　　　无序列表由

标签组成,使用
- 标签项前面有个实心的小圆点　　　　 >一般用于无序类型的列表,如导航,侧边栏新闻等
  010

【响应式】foundation栅格布局的“尝鲜”与“填坑”

提到响应式，就不得不提两个响应式框架——bootstrap和foundation。在标题上我已经说明白啦，今天给大家介绍的是foundation框架。何为“尝鲜”？就是带大伙初步一下foundati

数据科学 IPython 笔记本 9.4 NumPy 数组的基础

Python 中的数据操作几乎与 NumPy 数组操作同义：即使是像 Pandas 这样的新工具也是围绕 NumPy 数组构建的。本节将介绍几个示例，使用 NumPy 数组操作来访问数据和子数组，以及拆分，重塑和连接数组。

02

学界 | 堆叠解卷积网络实现图像语义分割顶尖效果

选自arXiv 机器之心编译参与：路雪本文介绍了一种堆叠解卷积网络（Stacked Deconvolutional Network），它可用于高效的图像语义分割。该方法堆叠多个浅层解卷积网络，采用

07

MySQL写马详解

general_log指的是日志保存状态，一共有两个值（ON/OFF）ON代表开启 OFF代表关闭。

01

Excel图表学习70：按大小顺序的堆积柱形图

创建堆积柱形图时，列将按照系列添加到图表的顺序进行堆积。例如，绘制如下图1所示的简单数据时，系列A位于底部，系列B堆叠在A上，C堆叠在B上。这样的顺序忽略了每个类别中点的单个值。

02

Sql注入总结学习

==基于floor，UpdateXml(有长度限制,最长32位)，ExtractValue(有长度限制,最长32位)进行报错注入。==

02

Excel图表技巧13：隐藏系列中值为0的数据标签

如果能够熟悉且创造性地应用数字格式，那么可以帮助解决Excel图表机制中的一些明显缺陷，整理图表，产生其他方式难以实现的效果。

03

使用NumPy、Numba的简单使用(二)

本来要写NLP第三课动态规划的，日了，写到一半发现自己也不会了，理论很简单，动态规划咋回事也知道，但是实现在源码上还是有点难度，现在简单给予题目描述，小伙伴也可以来思考一下，例题一，我们现在有1元硬币，2元硬币，5元硬币和10元硬币。我们要将M金额的钱换为硬币，保证硬币数目最少，我们的换法是什么，例题二，我们现在有M米的绳子，截成N段（N的长度一定为整数），将N段绳子的长度相乘，保证乘积结果为最大值，我们需要截取，过几天再回头来写这个吧。我们今天来继续说说numpy的用法，这次我们通过习题来看看numpy的用法。

05

Python之numpy数组学习（二）

前言前面我们学习了numpy库的简单应用，今天来学习下比较重要的如何处理数组。处理数组形状下面可将多维数组转换成一维数组时的情形。利用以下函数处理数组的形状：拆解：ravel()函数可将多维数组变成一维数组。拉直（Flatten）：flatten()函数与ravel()相同，但是，flatten()返回的是真实的数组，需要分配新的内存空间；而ravel()函数返回的只是数组的视图。用元组指定数组形状：除reshape()函数外，还可以用元组来定义数组的形状。转置：在线性代数中，矩阵的转置操作

08

实用！Python数据合并与连接操作：精确汇总数据

在实际的数据分析和处理中，常常需要将多个数据集进行合并和连接，以便进行更全面、准确的数据分析。Python 提供了丰富的工具和库，使得数据合并与连接操作变得简单高效。下面将介绍 Python 中常见的数据合并和连接方法，包括合并数据框、连接数据框、堆叠数据和拼接数据等。

01

Web 开发常备工具

工欲善其事，必先利其器。如今 Web 开发标准越来越高，Web 开发者也在不断寻找途径提升自己的技能。为使大家的开发工作更顺利进行，本文整理了 10+ 款比较优秀的 Web 开发工具，希望对你有帮助。

08

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭