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;
}​