W3.CSS Layout (布局)

2020-11-10 11:45 更新

实例

<div class="w3-container w3-black w3-cell">

<div class="w3-container w3-dark-grey w3-cell w3-cell-middle">

<div class="w3-container w3-blue-grey w3-cell w3-cell-bottom">


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS Layout 类

W3.CSS 在版本 2.90 / 2.91 为“layout”布局引入了以下类:

描述
w3-cell-row
单元格(列)的容器。
w3-cell
布局单元格(列)。
w3-cell-top
在单元格(列)顶部对齐内容。
w3-cell-middle
在单元格(列)的垂直中间对齐内容。
w3-cell-bottom
在单元格(列)底部对齐内容。
w3-mobile
向单元格(列)添加移动优先响应。
在移动设备上将元素显示为块元素。

提示:  布局类替换不推荐使用旧版布局类。

            新的布局分类器更加通用,更易于使用。

            此页面底部列出了不推荐使用的布局类。


HTML 块元素

最初,HTML块元素(如<div>元素)显示为垂直块:

您好W3.CSS布局。
您好W3.CSS布局。

实例

<div class="w3-container w3-red">

  <p>您好W3.CSS布局。</p>

</div>

<div class="w3-container w3-green">

  <p>您好W3.CSS布局。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

单元格布局

w3-cell 类重新定义块元件以水平显示(表格单元格):

您好W3.CSS布局。
您好W3.CSS布局。

实例

<div class="w3-container w3-red w3-cell">

  <p>您好W3.CSS布局。</p>

</div>

<div class="w3-container w3-green w3-cell">

  <p>您好W3.CSS布局。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

容器布局

w3-cell-row 类为表格(列)的容器。

w3-cell-row 容器的宽度定义了所有包含的单元格的总宽度。

默认宽度为100%:

您好W3.CSS布局。
您好W3.CSS布局。

实例

<div class="w3-cell-row">

  <div class="w3-container w3-red w3-cell">

    <p>您好W3.CSS布局。</p>

  </div>

  <div class="w3-container w3-green w3-cell">

    <p>您好W3.CSS布局。</p>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

如果更改单元格容器的宽度,它将减小所包含单元格的总宽度:

您好W3.CSS布局。
您好W3.CSS布局。

实例

<div class="w3-cell-row" style="width:75%">

  <div class="w3-container w3-red w3-cell">

    <p>您好W3.CSS布局。</p>

  </div>

  <div class="w3-container w3-green w3-cell">

    <p>您好W3.CSS布局。</p>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

布局单元格可以自我调整

w3-cell 类具有内置自调整标准非常漂亮。并排元素将自动调整为必要的宽度: 

您好W3.CSS布局。
您好W3.CSS布局。您好W3.CSS布局。

实例

<div class="w3-container w3-red w3-cell">

  <p>您好W3.CSS布局。</p>

</div>

<div class="w3-container w3-green w3-cell">

  <p>您好W3.CSS布局。您好W3.CSS布局。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

为布局单元格调整相等的高度

并排的 w3-cell 元素还将自动自我调整为相等的高度: 

您好W3.CSS布局。

您好W3.CSS布局。

您好W3.CSS布局。

您好W3.CSS布局。

您好W3.CSS布局。

实例

<div class="w3-container w3-red w3-cell">

  <p>您好W3.CSS布局。</p>

</div>

<div class="w3-container w3-green w3-cell">

  <p>您好W3.CSS布局。</p>

  <p>您好W3.CSS布局。</p>

  <p>您好W3.CSS布局。</p>

  <p>您好W3.CSS布局。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

响应式布局

w3-mobile 类添加移动第一响应性的任何 HTML 元素。

与 w3-cell 一起使用时,它将在小屏幕/手机上垂直显示布局列,在中/大屏幕上水平显示。

在中/大屏幕上:

您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。


在小屏幕上:

您好W3.CSS布局。
您好W3.CSS布局。
您好W3.CSS布局。

实例

<div class="w3-container w3-red w3-cell w3-mobile">

  <p>您好W3.CSS布局。</p>

</div>

<div class="w3-container w3-green w3-cell w3-mobile">

  <p>您好W3.CSS布局。</p>

</div>

<div class="w3-container w3-blue w3-cell w3-mobile">

  <p>您好W3.CSS布局。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

容易对齐

w3-cell 类使得它很容易对齐文本。

共有3种不同的对齐方式类:

  • w3-cell-top (default)
  • w3-cell-middle
  • w3-cell-bottom

您好W3.CSS布局。

您好W3.CSS布局。

您好W3.CSS布局。

您好W3.CSS布局。

您好W3.CSS布局。

您好W3.CSS布局。

实例

<div class="w3-cell-row">

<div class="w3-container w3-red w3-cell">

  <p>您好W3.CSS布局。</p>

  <p>您好W3.CSS布局。</p>

  <p>您好W3.CSS布局。</p>

  <p>您好W3.CSS布局。</p>

</div>

<div class="w3-container w3-green w3-cell w3-cell-middle">

  <p>您好W3.CSS布局。</p>

</div>

<div class="w3-container w3-blue w3-cell w3-cell-bottom">

  <p>您好W3.CSS布局。</p>

</div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

不推荐使用的W3.CSS表格布局类

w3-layout-container 请改用 w3-cell-row。
w3-layout-row
 
w3-layout-cell
请改用 w3-cell。
w3-layout-top
请改用 w3-cell-top。
w3-layout-middle
请改用 w3-cell-middle。
w3-layout-bottom
请改用 w3-cell-bottom。
w3-layout-col
请改用 w3-mobile。

提示: 不推荐使用的类将从4.0版的W3.CSS中删除

以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号