40

だから私は、純粋な CSS を使用して、決してテーブルをレイアウトに使用しないというゴスペルを使用しようとしました。しかし、信じられないほどの痛みと苦悩の後で、私はもうあきらめる準備ができています. 私は、CSS で何かを達成するために何らかの努力を惜しみません。誤解しないでください。しかし、レイアウト テーブルで実行できる非常に単純なことのいくつかがCSS ではまったく不可能であるように思われる場合でも、概念的な純粋さが実際に打撃を受け始めるかどうかは気にしません。

今、私は怒っているように見えるかもしれません。私は無駄な時間を過ごしたことに腹を立てています。QuarkXpress の背景から出てきた人々が役に立たない固定幅のデザインを私に手渡してきたことに腹を立てています。CSS の失敗した約束に腹を立てています。しかし、私は議論を始めようとしているわけではありません。純粋な CSS をもう一度試してみるか、まとめていつでも好きなときにレイアウト テーブルを使用するかを決定する、1 つの簡単な質問に対する答えを本当に知りたいと思っています。実際にそうでない場合、これは不可能だと考えてレイアウトテーブルに戻りたくないからです。

問題は次のとおりです。純粋なCSS レイアウトを使用して、左側に固定幅の列を配置し、その右側にデータ テーブルを配置し、データ テーブルが残りの部分をきちんと占めるようにする方法はありますか?どんなスペースがありますか？つまり、幅 100% の 2 セル レイアウト テーブルを左側のセルに固定幅にすることで簡単に達成できる同じレイアウトですか?

4

9 に答える 9

50 
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

それでうまくいくはずです（明らかに実装はページ内の場所によって異なりますが、それがあなたが探している概念だと思います）。

于 2009-01-22T04:54:46.900 に答える
12

これはあなたが探しているものですか？

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
#framecontent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  /*Width of frame div*/
  height: 100%;
  overflow: hidden;
  /*Disable scrollbars. Set to "scroll" to enable*/
  background: navy;
  color: white;
}
#maincontent {
  position: fixed;
  top: 0;
  left: 200px;
  /*Set left value to WidthOfFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #fff;
}
.innertube {
  margin: 15px;
  /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
  /*IE6 hack*/
  padding: 0 0 0 200px;
  /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
  /*IE6 hack*/
  height: 100%;
  width: 100%;
}
<div id="framecontent">
    <div class="innertube">

      <h1>CSS Left Frame Layout</h1>
      <h3>Sample text here</h3>

    </div>
  </div>


  <div id="maincontent">
    <div class="innertube">

      <h1>Dynamic Drive CSS Library</h1>
      <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
      </p>

    </div>
  </div>

私はあなたの痛みを感じますが、それを無駄な時間と見なさないようにしてください。以前よりも CSS をよりよく理解していると思います。それを使い続けると、利点が見え始めます。個人的には、CSS は習熟するために多くの練習が必要なものの 1 つであることがわかりました。私は CSS ベースのレイアウトを 5 年間使用しており、今でも毎日興味深いトリックを学んでいます。

于 2009-01-22T04:26:55.570 に答える
11

これがあなたが探しているものだと思います：

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

あとでよろしくお願いします。=P

（私は明らかに冗談を言っています....ちょっと...）

于 2009-01-22T04:51:25.550 に答える
4

まず、Eric Meyer の CSS の本と、Web 上のCSS リファレンスであるA List Apartをお勧めします。私は自分の仕事で CSS を広範囲に使用しており、かなり上手になったと思います。

以上のことを踏まえて、うまくいくことをしてください。私はまさにあなたが経験した痛みを経験してきました。最終的に、テーブルを使用していなかったと言えるようになるためだけに、デザインを妥協する価値はないと判断しました。

覚えておいてください: あなたは CSS を行うために報酬を得ているのではありません。

于 2009-01-22T04:48:47.617 に答える
1

このようなもの：

<div style="position: relative; width: 100%">
    <div style="position: absolute; left: 0; top: 0; width: 200px">
        left column
    </div>
    <div style="position: absolute; left: 200px; top: 0">
         other stuff
    </div>
</div>

もちろん、インラインではなく別のスタイルシートにスタイルを配置する必要があります。左側の 1 つの固定幅の列はかなり単純ですが、テーブルでは簡単に実行できるが、私の知る限り、CSS では非常に難しい他のレイアウトを時々見かけます。

于 2009-01-22T04:31:04.767 に答える
1

これらを試してみてください：

http://www.alistapart.com/stories/practicalcss/

http://www.w3.org/2002/03/csslayout-howto

理由は次のとおりです。

http://en.wikipedia.org/wiki/Tableless_web_design

http://davespicks.com/essays/notables.html

その他のハウツー:

    div.row {
      clear: both;
      padding-top: 10px;
    }

    div.row span.label {
      float: left;
      width: 100px;
      text-align: right;
    }

    div.row span.formw {
      float: right;
      width: 335px;
      text-align: left;
    }


    <div style="width: 350px; background-color: #cc9;
      border: 1px dotted #333; padding: 5px;
      margin: 0px auto";>
      <form>
        <div class="row">
          <span class="label">Name:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Age:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Shoe size:</span><span
            class="formw"><input type="text" size="25" /></span>
        </div>
        <div class="row">
          <span class="label">Comments:</span><span
              class="formw">
            <textarea cols="25" rows="8">
            Go ahead - write something...
            </textarea>
          </span>
        </div>
        <div class="spacer">
          &nbsp;
        </div>
      </form>
    </div>
于 2009-01-22T05:01:30.430 に答える
0

テーブルを使用して数行を複製するために、CSS がまだコードのページ全体を使用する方法が気に入っています。

CSS戦争と戦った後、私は「純粋」は見る人の目にあるという結論に達し、「機能するものを使用しましょう」というアプローチに移行しました.

CSS が得意とするところに CSS を使用する: 見栄えを良くする。可能な場合は、DIV と SPAN を使用してください。しかし、さまざまなブラウザーのすべてのフレーバーで物事を正しく並べようとして 1 日を費やしていることに気付いた場合は、そこにテーブルを叩いて先に進みます。心配しないでください。多くの人が思っていることとは反対に、子犬は実際には死にません。

于 2009-01-22T04:41:57.567 に答える
-1

問題の要素に display:table と display:table-cell を適用することを含む答えはほぼ確実にあります。つまり…いいえ。

于 2009-01-22T04:35:30.967 に答える