如何重复网格行？

发布于 2024-08-23 02:59:04 字数 787 浏览 3 评论 0原文

我该如何重复这一点，不知怎的，清晰的布局并没有在彼此之下进行？

<div class="grid_3 alpha"></div><div class="grid_2"></div><div class="grid_11"></div>
<div class="clear" style="height:20px"></div>

<div class="grid_3 alpha"></div><div class="grid_2"></div><div class="grid_11"></div>
<div class="clear" style="height:20px"></div>

<div class="grid_3 alpha"></div><div class="grid_2"></div><div class="grid_11"></div>
<div class="clear" style="height:20px"></div>

<div class="grid_3 alpha"></div><div class="grid_2"></div><div class="grid_11"></div>
<div class="clear" style="height:20px"></div>

原文

How do i repeat this, somehow the clear doesn't make the layout under eachother ??

<div class="grid_3 alpha"></div><div class="grid_2"></div><div class="grid_11"></div>
<div class="clear" style="height:20px"></div>

<div class="grid_3 alpha"></div><div class="grid_2"></div><div class="grid_11"></div>
<div class="clear" style="height:20px"></div>

<div class="grid_3 alpha"></div><div class="grid_2"></div><div class="grid_11"></div>
<div class="clear" style="height:20px"></div>

<div class="grid_3 alpha"></div><div class="grid_2"></div><div class="grid_11"></div>
<div class="clear" style="height:20px"></div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

把人绕傻吧 2024-08-30 02:59:04

尝试在空网格 div 中放置一个。使用空的 960.gs 网格 div 会出现一些跨浏览器问题。

编辑：以下内容在 Firefox 和 Chrome 中完美运行。也许您的文档类型或容器元素不正确？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>960 Grid System — Test</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/text.css" />
    <link rel="stylesheet" href="css/960.css" />
    <style type="text/css"> 
      div.grid_3 { background-color: #0f0; }
      div.grid_2 { background-color: #f00; }
      div.grid_11 { background-color: #00f; }
    </style>
  </head>
  <body>
    <div class="container_16">
      <div class="grid_3 alpha"> </div><div class="grid_2"> </div><div class="grid_11"> </div>
      <div class="clear" style="height:20px"></div>
      <div class="grid_3 alpha"> </div><div class="grid_2"> </div><div class="grid_11"> </div>
      <div class="clear" style="height:20px"></div>
      <div class="grid_3 alpha"> </div><div class="grid_2"> </div><div class="grid_11"> </div>
      <div class="clear" style="height:20px"></div>
      <div class="grid_3 alpha"> </div><div class="grid_2"> </div><div class="grid_11"> </div>
      <div class="clear" style="height:20px"></div>
    </div>
  </body>
</html>

Try putting a within the empty grid divs. There are some cross-browser issues with using empty 960.gs grid divs.

Edit: The following works perfectly in Firefox and Chrome. Perhaps your doctype or the container elements are not right?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>960 Grid System — Test</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/text.css" />
    <link rel="stylesheet" href="css/960.css" />
    <style type="text/css"> 
      div.grid_3 { background-color: #0f0; }
      div.grid_2 { background-color: #f00; }
      div.grid_11 { background-color: #00f; }
    </style>
  </head>
  <body>
    <div class="container_16">
      <div class="grid_3 alpha"> </div><div class="grid_2"> </div><div class="grid_11"> </div>
      <div class="clear" style="height:20px"></div>
      <div class="grid_3 alpha"> </div><div class="grid_2"> </div><div class="grid_11"> </div>
      <div class="clear" style="height:20px"></div>
      <div class="grid_3 alpha"> </div><div class="grid_2"> </div><div class="grid_11"> </div>
      <div class="clear" style="height:20px"></div>
      <div class="grid_3 alpha"> </div><div class="grid_2"> </div><div class="grid_11"> </div>
      <div class="clear" style="height:20px"></div>
    </div>
  </body>
</html>

回复收藏 0 原文

~没有更多了~