html - CSS 3 列布局

Question

Layout Link你好，我想用 CSS 和 HTML 创建一个布局，如图所示。

我尝试了几种方法并在互联网上进行了搜索，但找不到适合我的布局的解决方案。起初我尝试过

div{
  width: 100%;
  column-count: 3;
  column-rule-color: red;
  column-rule-width: 8px;
  column-rule-style: solid;
 }

对于第一行，这应该有效。但是第二次我只能使用:

    div{
      width: 100%;
      column-count: 2;
      column-rule-color: red;
      column-rule-width: 8px;
      column-rule-style: solid;
     column-width: 50%;
}

但我不想两栏都占 50%。我想第一个这么长怎么排在第2个。

有没有可能完成这个任务？

Answer 1

完成该布局的最佳方式是使用 960 Grid 框架。这是一个很棒的框架，专为此类目的而设计。这个框架将使您的工作轻松一百倍。

这是链接:960 Grid Framework

这里有一个简短的 Youtube 播放列表教程，介绍如何使用 960 网格系统: How to use 960.gs