开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在桌面显示一行六列，在移动端显示两行三列？

在桌面显示一行六列，在移动端显示两行三列，可以通过响应式设计来实现。响应式设计是一种能够根据设备屏幕大小和分辨率自动调整布局和显示效果的设计方法。

在前端开发中，可以使用CSS媒体查询来实现响应式布局。媒体查询可以根据不同的屏幕宽度应用不同的CSS样式。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.column {
  float: left;
  width: 16.66%; /* 在桌面显示一行六列 */
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

/* 在移动端显示两行三列 */
@media screen and (max-width: 600px) {
  .column {
    width: 33.33%;
  }
}
</style>
</head>
<body>

<div class="row">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
  <div class="column">6</div>
</div>

</body>
</html>

在上述代码中，使用了CSS的float属性将每个列元素浮动到左侧，并设置了宽度为16.66%（100%除以6）来实现在桌面显示一行六列的效果。同时，使用了媒体查询@media来判断屏幕宽度是否小于等于600px（移动端），如果是，则将列元素的宽度设置为33.33%（100%除以3），从而实现在移动端显示两行三列的效果。

这种响应式设计的优势在于能够适应不同设备的屏幕大小和分辨率，提供更好的用户体验。在实际应用中，可以根据具体需求进行调整和优化。

腾讯云相关产品和产品介绍链接地址：

腾讯云：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯会议：https://cloud.tencent.com/product/tc-meeting
腾讯云直播（CSS）：https://cloud.tencent.com/product/css
腾讯云音视频（VAS）：https://cloud.tencent.com/product/vas
腾讯云安全中心（SSC）：https://cloud.tencent.com/product/ssc

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

有帮助

没帮助

相关·内容

Jump Start Bootstrap 第2章

在这一章，我们将讨论Bootstrap一个最重要的功能：网格系统。我们将学会网格系统如何工作；我们如何在应用中使用网格系统；我们也将创建简单的网页布局去更好的理解它。

04

5分钟学习css网格

您将在本文中,简单了解到如何使用网格布局,一种布局有多种实现方式,曾今对于使用老的弹性盒模型(display:box)以及新的flex(display:flex)布局用过的话,对于css Grid网格布局又是一个新的玩意,它相比于前两者,非常的强大,我也是个初学者,如果译文有误导的地方,请路过的老师多提意见和指正,如果你想阅读英文原文,扫文末下方的二维码,或者跳转到指定的链接就可以了的

02

魔改笔记二：首页分类，轮播卡片以及动画添加

01

css布局 - 工作中常见的两栏布局案例及分析

突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法。临时就在我经常浏览的网站上抓的相对应的截图。（以后看到其他类型的我再补充）

01

给1-3年的前端 6 点诚心建议

最近接触了很多前端的小伙伴，和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。

03

bootsrap栅格系统

在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏

04

移动端UI界面设计之APP字体排版原则| 萧蕊冰

今天介绍的是移动端UI界面设计的有关APP字体排版原则的内容。除了电脑端的网站UI设计，移动端的界面设计也是UI设计中的一个重要部分，毕竟我们每个人平时身上带着的肯定有手机。今天萧蕊冰就介绍一下关于移动端UI界面设计的app字体的排版相关内容，感兴趣的可以接着往下看。

03

如何做一张属于自己的自适应网页

杨小杰带来网站搭建技术教程相关页面' style='color:red;'>技术教程，现在为大家分享一篇关于如何做一张属于自己的自适应网页的文章，相信看完这篇文章后，你就能给自己来一个漂亮的自适应了！

04

grid网格布局

距今来看已经十多年了，确确实实占据了前端布局中很大的地位，相比大家对flex都很熟悉，所以今天我们的主角就是-------> Grid

04

《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程

点击整个专栏查看其它系列文章（系列文章更新中…）：《iVX 高仿美团APP制作移动端完整项目》

01

1.2线性代数-行列式的性质

3214是1234经过一次顺序变换得来的（1和3变换位置），1234为偶，3214肯定是奇

02

响应式设计

给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。网页设计师 Ethan Marcotte 称这种方式为响应式设计（responsive design）。

01

分享8个提高工作效率的Excel技巧

3.复制划定区域，再进行黏贴，选择“仅复制数据”，这样一来，划定区域的公式会被消去，最后把不需要的数据进行删除就好。

01

linux每日命令(13)：more命令

more命令，功能类似 cat ，cat命令是整个文件的内容从上到下显示在屏幕上。 more会以一页一页的显示方便使用者逐页阅读，而最基本的指令就是按空白键（space）就往下一页显示，按 b 键就会往回（back）一页显示，而且还有搜寻字串的功能。more命令从前向后读取文件，因此在启动时就加载整个文件。

01

Django搭建博客（二）：博客的布局

黄色的方框里是我博客的名字，也相当于是一个 logo吧，绿色的部分我计划每小时随机显示一条名言（或者鸡汤？）

02

移动端WEB开发之响应式布局

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

02

「HTML&CSS」文本自适应换行

请注意，本文编写于 1012 天前，最后修改于 1012 天前，其中某些信息可能已经过时。

03

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少谈谈一些有趣的CSS题目

05

19 年学好前端的6点建议

要成为一名年薪30W的前端工程师，基础一定要掌握牢固，基础知识一问三不知，岂不是要贻笑大方。

02

使用非 Docker 方案在腾讯云轻量应用服务器上搭建密码管理软件 Vaultwarden (Bitwarden_rs)

Bitwarden 是一款自由且开源的密码管理服务，用户可在加密的保管库中存储敏感信息（例如网站登录凭据）。Bitwarden 平台提供有多种客户端应用程序，包括网页用户界面、桌面应用，浏览器扩展、移动应用以及命令行界面。Bitwarden 作为一款商业自由软件，其开发公司提供云端托管服务 (bitwarden.com)，同时为广大开源社区提供自行部署的解决方案。

03

使用非 Docker 方案在腾讯云轻量应用服务器上搭建密码管理软件 Vaultwarden (Bitwarden_rs)

Bitwarden 是一款自由且开源的密码管理服务，用户可在加密的保管库中存储敏感信息（例如网站登录凭据）。Bitwarden 平台提供有多种客户端应用程序，包括网页用户界面、桌面应用，浏览器扩展、移动应用以及命令行界面。Bitwarden 作为一款商业自由软件，其开发公司提供云端托管服务 (bitwarden.com)，同时为广大开源社区提供自行部署的解决方案。

03

【Web技术】522- 设计体系的响应式设计

在蚂蚁内部有着数量繁多且复杂的中后台业务系统，Ant Design 一直以来致力于从设计策略和资产的角度解决这些产品的体验一致性问题，随着蚂蚁产品生态的多端化进程，越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露，例如：

02

CSS基础布局

CSS布局确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。 * 早期以table为主(简单) * 之后以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局在移动端大行其道的时代是必备的 * table表格布局 * float浮动 + margin * inline-block布局 (用起来方便，但是小问题较多) * flexbox布局盒模型如下图所示：宽度和高度指的是content的宽度和高度 margin指的是距离上一个元素

02

FlutterUnit 桌面分支合并，一套代码 - 五端通行

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

02

《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程

点击整个专栏查看其它系列文章（系列文章更新中…）：《iVX 高仿美团APP制作移动端完整项目》

01

移动端H5各种各样的列表的制作方法(七最终章) by FungLeo

通过数个章节,从最简单的一行文字的列表,到各种图文列表.事实上,绝大多数列表的形式,都可以在我这六章的博文里找到相对应的方法.方法就是这些方法,只是如何去灵活运用的事情了.

01

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。

04

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。

02

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。

01

学好前端的 6 点建议

最近接触了很多前端的小伙伴，和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。

03

数学知识回顾-行列式基础知识

1 引言过去的17年，人工智能随着AlphaGo火热起来，也重新燃起了我希望研究数据科学的热情。或是专业价值观作祟，我深以为数据科学将迎来更好的发展。让人沮丧的事，人工智能或数据科学入门门槛极高，就算是入门级的数学知识也会让人望而却步。“革命不是躺着就能成功的！”，18年我希望逐步捡起相关的数学知识，能够一窥人工智能的奥秘，并将所学的知识整理分项出来，与更多地朋友相互勉励，一起进步。 2 行列式的定义这个定义包括2部分： 1.每一行取不同列的值相乘，再相加。 2.表示符号。用排列的逆序数的奇偶性决定是“

07

《Android Studio开发实战从零基础到App上线(第2版)》资源下载和内容勘误[通俗易懂]

下面是《Android Studio开发实战从零基础到App上线(第2版)》一书用到的工具和代码资源： 1、本书使用的Android Studio版本为3.2，最新的安装包可前往Android官网页面下载。 2、本书使用的Android NDK版本为r17，最新的安装包可前往Android官网页面下载。 3、本书提供所有示例源码的demo工程下载，源码（适配Android4.1到9.0和Android Studio 3.2到3.4）的下载页面为https://pan.baidu.com/s/14NE2DD-frXxuDXUAlTfRaw。最新的源码也可访问我的github获取，github地址是https://github.com/aqi00/android2，服务端的github地址是https://github.com/aqi00/net_server。（部分地区如新疆既访问不了百度网盘也访问不了github，此时可访问csdn的下载页面获取源码https://download.csdn.net/download/aqi00/11223223）。另外，AS3.4之后默认开了androidx，如需获取适配了androidx的本书源码，可访问这个github页面https://github.com/aqi00/androidx。有的读者反映从github下载本书源码很慢，或者下载不完整，这是国外服务器连接不稳定造成的。建议访问这个代下载网站https://d.serctl.com/，按照网站左上角的“如何下载教程”，找到本书源码的github下载地址并提交，等待几秒后就能在该网站下载完整的源码了。源码与各章的对应关系表见下图：

01

线性代数,行列式(加边法求行列式例题)

对于n个不同的元素，先规定各元素之间有一个标准次序，于是在这n个元素的任一排列中，当某两个元素的先后次序与标准次序不同时，就说有一个一个逆序，一个排列中所有逆序的总数叫做这个排列的逆序数。逆序数为奇数的排列叫做奇排列，为偶数的的排列叫做偶排列；

03

RecyclerView通过GridLayoutManager实现多样式布局的示例

距离上次写文章已经有段时间了，说实话真不知道最近在忙些什么，现在沉下心来把最近项目中遇到的问题记录下来便于以后遇到中使用吧！

01

vim 从嫌弃到依赖(7)——可视模式

vim 的可视模式下可以选择一个区域，然后针对区域进行操作。可视模式有点类似于在其他编辑器上使用鼠标选中一块区域然后针对区域进行操作。

03

[oeasy]python024_vim读取文件_从头复制到尾_撤销_重做_reg_寄存器

01

C#入门教程（二）–C#常用快捷键、变量、类型转换-打造C#

C#入门教程（一）–.Net平台技术介绍、C#语言及开发工具介绍-打造C#学习教程

05

用R来拼图和排版，告别AI和PS(二)：调节宽度和高度

前面我们简单给大家介绍了如何使用R包patchwork来拼图和排版，今天我们接着来探讨，如何在拼图和排版的时候调节图片的宽度和高度，使最后的图片层次鲜明，重点突出。

02

在Python中使用Matplotlib画多个绘图，so easy！

Python的Matplotlib库是使用最广泛的数据可视化库之一。使用Matplotlib，可以使用各种图表类型（包括折线图、条形图、饼图和散点图）绘制数据。

01

CSS控制文字，超出部分显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

02

bootstrap快速入门笔记（二）-栅格系统，响应式类

1，行row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，一行有12列

03

简书markdown教程

##1 支持 Markdown 的编辑器 ###Windows 推荐 Sublime Text 3，强大优雅的编辑器。 MarkdownPad，一款可以直接预览排版效果的编辑器。 ###Mac 推荐 Ulysess，专注写作的编辑器，功能强大，体验一流。 Macdown，可以预览排版效果。 ###Linux 推荐 VIM，编辑器之神。当然，Emacs是神的编辑器。 ReText，也可以预览。 ###Web 推荐简书，有 Markdown 写作/预览模式。作业部落，功能强大的 Markdown 编辑器。与其他常用工具配合在 Firefox 浏览器上，推荐插件 It’s All Text!，可以将网页上的文本框转化为 Markdown 编辑器。在和 Evernote 配合使用时，推荐使用马克飞象。 ###扩展阅读《好用的 Markdown 编辑器一览》欢迎补充，随时更新。

01

什么是“移动先行”原则，如何践行？

2010年的全球移动通信大会上，谷歌时任首席执行官Eric Schmidt 提出：产品设计应遵循 “移动先行” 的原则。该原则具体指什么？遵循该原则的依据有哪些？为什么它在产品设计中如此重要？本文中，我将重点回答这几个问题。一、什么是“移动先行” 原则？为了更好地理解该原则，首先要了解两个概念： 1. 响应式网页设计（RWD）一种网页设计方法。该设计使网页自动适应不同设备（电脑，手机或其他移动端）的屏幕大小，且呈现的内容符合用户的浏览习惯，从而减少用户在浏览时的缩放，平移和滚动等操作。

04

自适应网页设计（Responsive Web Design）

随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通

07

树莓派基础实验29：I2C LCD1602实验

众所周知，虽然液晶显示器和其他显示器大大的丰富了人机交互，但他们有一个共同的弱点。当它们连接到控制器时，需要占用大量的IO口，但是一般的控制器没有那么多的外部端口，也限制了控制器的其他功能。因此，开发具有I2C组件的LCD1602来解决该问题，LCD1602是一种只用来显示字母、数字、符号等的点阵型液晶模块。

04

四款国内外远程桌面软件横测：ToDesk、向日葵、TeamViewer、AnyDesk

远程桌面软件对于职场人来说并不陌生，可以说是必备的办公软件之一。在经历过新冠疫情后，大家对于远程办公的认识越来越深入，也就在这段期间，远程桌面软件大范围的应用起来，真正走进大众视野并融入我们的工作和生活。

linux top命令详解

top 命令主要用于查看进程的相关信息，同时它也会提供系统平均负载，cpu 信息和内存信息。下面的截图展示了 top 命令默认提供的信息：

02

hexo volantis主题添加首页轮播图

本文为2021年教程，hexo以及主题版本迭代较快具有时效性，方法可能发生改变，酌情观看

01

css3 javascript 单行和多行文本溢出截断多种方案

写在最前面在我们日常开发中的时候经常会遇到一种业务场景，需要截断一些文字的显示。可能是一行或者两行，或者根据字数限制或者用户的显示屏幕大小来展示对应的文字。 css 篇一：单行文本溢出处理代码 .text-ellipsis-single{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 响应式截断，当文本溢出的时候才显示省略号。预览codepen 情况 codepen.io/lpove/pen/M… 分

01

css菜鸡的自我救赎

我们看百度搜索的顶部，顶部的#head（搜索框这一行都是）是fixed的，紧接着的那个div是一个tab。当然fixed脱离文本流，就用padding把自己的主要内容顶到下面去，不然内容就直接置顶了。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭