怎么让6个div分占两行一行三个

在html开发中,我们经常会使用到div,和css样式的。使用div来布局页面也是经常的事。那么你知道如何让6个div分占二行吗?下面来看一下。

操作方法

  • 01

    我们先在html里输入6个div。

  • 02

    然后添加一些样式。

  • 03

    运行页面后,可以看到默认情况下,div是以块来占据页面的,每一个div会占一行。

  • 04

    添加样式 display:inline-block,可以让div是行内元素显示,不占据单独行。

  • 05

    修改后,页面效果是这样的。

  • 06

    我们可以为div添加一个width的样式,为了让三个占用一行,我们可以将宽度设置为30%.

  • 07

    现在的效果基本上可以满足要求了。

  • 08

    再添加一些样式,可以使div显示得更美观一点。

(0)

相关推荐

  • 如何解决word中一段文字占两行空间的问题?

    办公软件word基本上每个人都使用过,但是有时候会出现一些bug,让人很是苦恼,有时候研究半天也无所获,今天讲一下小编经常遇到过的问题,前几天终于整明白了,特来分享给大家. 问题 01 用word在输 ...

  • 淘宝直通车怎么查看质量分占比和变化趋势

    在推广直通车的时候怎么了解自己推广的全部宝贝的质量分占比情况及变化情况呢? 操作方法 01 在店铺的后台我的快捷菜单中找到我要推广的模块,点击直通车进入到直通车后台 02 在直通车后台我们可以看到左侧 ...

  • iPad Air 2 跑分出炉 搭载三核 A8X 处理器,2GB 内存

    虽然苹果在上周的发布会上着重宣传了 iPad Air 2使用的全新 A8X 处理器,但苹果并没有给出 A8X 的配置标准,相信只有iPad Air 2到达用户手中后,才会有更多细节出现。根据之前的报告 ...

  • word怎么分栏(分两栏、三栏)

    办公学习中,word的作用已经达到不可替代的作用.在word文档,尤其在论文中,有时会遇到对文档分栏,那么该怎么对文档进行分栏了?这里用2013版本word说明word怎么分栏? 操作方法 01 首先 ...

  • css样式如何设置div元素水平垂直居中的三种方法

    CSS实现绝对定位元素的居中效果,有时候需要把一个元素进行居中,在这里讲解三种方法,各种方法有它的优缺点. 操作方法 01 1.建立txt文档,更改后缀名为html,如图: 02 2.右击html文件 ...

  • html/css如何让多个div标签水平排列?

    介绍在html/css中使多个标签(比如div)水平排列的两种方法比较.分别是float: left和display: inline-block. 操作方法 01 首先如图所示,我在html中放置了两 ...

  • 网站制作者必须精通的DIV+CSS排版技巧

    操作方法 01 网站建设及网站布局的基本是要懂得DIV+CSS,通过合理的利用DIV+CSS可以利于搜索引擎的抓取,个人感觉DIV+CSS作为制作网页,美化网页的一个重要辅助是很强大方便的,可以弥补t ...

  • QQ2009 CPU占用率很高的解决方法

    其实,造成这种QQ占用CPU资源过高的情况可能和你的QQ2009软件的设置有关系,通过修改QQ的设置就可以解决问题。 第一:降低qq群频繁弹出信息,将一些不经常使用的QQ群的自动弹出的聊天信息屏蔽,定 ...

  • 在Word 2007设置分栏的方法

    我们在报纸、杂志、书刊等上经常可以看到这样一些效果,一篇文章分两栏或三栏,然后首个文字字体放大,效果如下图。 Word2007分栏两栏设置 ①首先,在Word2007中选中需要分栏的整段或者整篇文字; ...