W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 案例:响应式布局



多列响应式布局

使用 W3.CSS 可以轻松创建多列响应式布局。

当在不同的屏幕尺寸上查看时,列将自动重新排列。

一些网格规则:

  • 以类为 <div class="w3-row-padding"> 的行开头
  • 使用预定义的类,如 "w3-third" 来快速创建网格列
  • 将文本内容放在网格列中

以下实例显示如何创建三列等宽的列:

Example

<div class="w3-row-padding">
  <div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
尝试一下 »

以下实例显示如何创建四列等宽的列:

Example

<div class="w3-row-padding">
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-quarter">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
 </div>
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
尝试一下 »

不同宽度的列

以下实例创建三列布局,其中中间的列宽于第一列和最后一列:

Example

 <div class="w3-row-padding">
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-half">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
尝试一下 »