css - 来自 Android XML 布局，如何将网页元素放置在 XHTML 中？

Question

我主要是一名 Android 开发人员，但我对使用 CSS 创建 XHTML 网页样式非常感兴趣。我想制作一个简单的网页布局，由三行组成，中间一行有三列。在 Android XML 中，我会这样(大致)完成:

<LinearLayout orientation:vertical> (parent)
----<LinearLayout orientation: horizontal>
----<LinearLayout orientation: horizontal>
--------<LinearLayout orientation: vertical>
--------<LinearLayout orientation: vertical>
--------<LinearLayout orientation: vertical>
----<LinearLayout orientation: horizontal>

这会创建一个看起来像这样的布局:

-----------------------------------------------
|                                             |
-----------------------------------------------
|             |                   |           |
-----------------------------------------------
|                                             |
-----------------------------------------------

我对 XHTML 和 CSS 还是有点陌生​​(虽然我的基础知识不多)，虽然我学得很快，但我还没有找到任何针对 Android 开发人员的网页布局设计教程.如果有人能解释一种实现我想要的布局的好方法，我将不胜感激。

TLDR:如何使用 XHTML 和/或 CSS 制作由三行组成、中间行具有三列的网站布局？

非常感谢!

Answer 1

这可能是您应该通过教程学习的内容，但这是您所要求的近似值。 http://jsfiddle.net/7LYhu/

HTML

<div class="row"> Row
</div>

<div class="row">
  <div class="col">
  Column
    </div>
  <div class="col">
      Column
  </div>
  <div class="col">
      Column
  </div>
</div>

<div class="row">
    Row
</div>​

CSS

.row {
      width: 80%;
      background: gray;
      text-align: center;
    }
.col {
      width: 33.3%;
      float: left;
      background: orange;
}​