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

作者:彼岸花开 | 创建时间: 2023-05-11
在html开发中,我们经常会使用到div,和css样式的。使用div来布局页面也是经常的事。那么你知道如何让6个div分占二行吗?下面来看一下。...
怎么让6个div分占两行一行三个

操作方法

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

然后添加一些样式。

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

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

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

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

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

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

点击展开全文

更多推荐