8

私は主にAndroid開発者ですが、CSSを使用してXHTMLでWebページを作成し、それらのページのスタイルを設定することに非常に興味があります。3行で構成され、中央の行が3列の単純なWebページレイアウトを作成したいと思います。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開発者向けのWebページのレイアウト設計に関するチュートリアルは見つかりませんでした。私が目指しているレイアウトを実現するための良い方法を誰かに説明していただければ幸いです。

TLDR：XHTMLやCSSを使用して、3行で構成され、中央の行に3列のWebサイトレイアウトを作成するにはどうすればよいですか？

どうもありがとうございます！

4

1 に答える 1

6

これはおそらくチュートリアルを通じて学ぶべきことですが、これがあなたが求めていたものの概算です。 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;
}​
于 2012-12-14T00:02:58.683 に答える