-1

ページをレイアウトする必要がありますが、テーブルなしでレイアウトする方法がわかりません。私はそれが可能でなければならないことを知っていますが、すべての固定幅で信じられないほど堅固ではないテーブルベースではないソリューションを考えることはできません。

モックアップ：http：//i.imgur.com/jSSDhIh.png

私が何をしようとも、私は大きな罪を犯そうとしているように見えます。たとえば、トップセット-次のいずれかが必要になるようです。

  1. テーブルを作成します（明らかに、すべての悪の根源）
  2. 特にこれらの要素の幅と高さをハードコードします。（#idまたはstyle =または使い捨てクラスのいずれか、3つすべても悪と見なされます）

そうですか？これらのシナリオを回避できる現実的な方法はありますか？答えをグーグルで検索すると、「テーブルは悪であり、CSSテーブルもIDセレクターやスタイル属性を使用しないでください。すべてが再利用可能なクラスである必要があります」という無駄な情報がたくさんあります。

編集：私はすでにCSSテーブル（表示：テーブル）でこれを行い、受け入れられないものとしてスローバックしました。それが機能し、それでも見栄えが良いので、それは問題ないと思いますが、それは私の呼びかけではありません。

4

3 に答える 3

0

ここにHTMLテーブルへのリンクがあります– HTMLでテーブルをいつどのように使用するか、 これはテーブルをいつ使用するかを理解するのに役立つかもしれません。

あなたのモックでは、テーブルを使用しない理由はありません。ワードプレスのバックエンドのように、フォームにはテーブルを使用しますが、表形式です。

しかし、本当にこれをdivにレイアウトしたい場合は、cssグリッドフレームワークを使用することをお勧めします。私は個人的にzurbfoundationを使用しています。ここにリンクがあります

于 2013-03-11T20:40:16.860 に答える
0

Bootstrapの使用をお勧めします。これにより、フォームのスタイルを設定するためのオプションが豊富に用意されています。（ただし、CSSの残りの部分に干渉する可能性があります。）

2列のフォームがどのように機能するかを次に示します。

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

<div class="row">

  <!-- right column -->
  <div class="span6">
    <label>Subject <input type="text"></label>
    <label>Category <select></select></label>
    <label><input type="radio"> Permanent Change</label>
    <label><input type="radio"> Temporary Change</label>
  </div>

  <!-- right column -->
  <div class="span6">
    <label>Requested Approval Date <input type="text"></label>
    Effective Dates <input type="text"> to <input type="text">
  </div>

</div>

明らかに、スタイリングには多くの要望がありますが、 http：//twitter.github.com/bootstrap/base-css.html#formsをチェックして、どれだけのことができるかを確認してください。あなたは調べたいと思うでしょう<form class="form-horizontal">。CSSは扱いにくいので、たくさんのが必要になることに注意してください<div class="control-group">。

于 2013-03-11T22:46:26.437 に答える
0

テーブルは悪ではありません。このstackexchangeページだけでも多くのテーブルがあります。divを使用して、グリッドを使用して行とスパンを作成したい人もいます。適切と思われる場所でテーブルを使用することをお勧めします。あなたが本当にそれを避けたいと思っているなら、Twitterのブートストラップのようなものをつかむことを検討してください。 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem そこで、足場を使用して、テーブルなしでアイテムを好きなように配置できます。

于 2013-03-11T20:36:06.210 に答える