哪个是最好的 3 列 100% 宽度纯 CSS 布局框架?

发布于 2024-09-27 00:12:44 字数 1432 浏览 9 评论 0原文

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

我家小可爱 2024-10-04 00:12:44

毫无疑问,您已经看到了这一点,但在他的 A List Apart 网站中,Matthew Levine 不仅提供了 三列布局的圣杯,但详细解释了它的工作原理。

Undoubtedly you've seen this already, but in his A List Apart website, Matthew Levine not only provides the Holy Grail of 3-column layouts, but explains how it works, in every detail.

心凉怎暖 2024-10-04 00:12:44

像这样的东西应该适用于大多数浏览器 IIRC。但是,如果您想要页眉/页脚,则需要某种 JavaScript,除非您使用假列。对于 RIA 我认为这是可以接受的。

就我个人而言,我从不使用 CSS 框架。

下面的例子也应该在 IE6 中工作:

  <html>
   <head>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
      <style type="text/css">
       html, body { height:100%; }

         .left { 
           width:200px;
           display:inline;
           float:left;
           background:blue;
           height:100%;
         }    

         .right { 
           width:200px;
           display:inline;
           float:right;
           background:red;
           height:100%;
         }

         .center {
           margin:0 200px;
           height:100%;
         }
     </style>
   </head>
   <body>
      <div class="right">test</div>
      <div class="left">test</div>
      <div class="center">test</div>
   </body>
</html>

Something like this should work in most browsers IIRC. However, you will need some sort of javascript if you want a header/footer unless you use faux columns. For an RIA I think this is acceptable.

Personally, I never use CSS frameworks.

The example below should also work in IE6:

  <html>
   <head>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
      <style type="text/css">
       html, body { height:100%; }

         .left { 
           width:200px;
           display:inline;
           float:left;
           background:blue;
           height:100%;
         }    

         .right { 
           width:200px;
           display:inline;
           float:right;
           background:red;
           height:100%;
         }

         .center {
           margin:0 200px;
           height:100%;
         }
     </style>
   </head>
   <body>
      <div class="right">test</div>
      <div class="left">test</div>
      <div class="center">test</div>
   </body>
</html>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文