来自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;
}?