1

ページに HTML テーブルがあり、これを div と CSS に置き換えようとしています。基本的に、これは 3x3 のテーブルで、中央にスケーラブルなコンテンツがあり、固定サイズのエッジとコーナーがあり、背景に画像があり、すべてが素敵なドロップ シャドウの外観になっています。

% とピクセルの混合に関する多くの記事やエントリを読みましたが、どれも私が探しているものを持っているようには見えません。

これが私がこれまでに持っているものです：

<html>
<body>
  <p>Text up here...</p>
  <div style="height: 200px; background-color: red; ">
   <div style="width: 80%; height: 100%;">
    <div style="clear: both; height: 100%;">
     <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
     <div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
     <div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div>
      </div>
     </div>
   </div>
   <p>Text down here...</p>
</body>
</html>

黄色のdivの隣に青いdivを表示するにはどうすればよいですか? 私はここで完全に基地から外れているかもしれません。助けていただければ幸いです。

4

6 に答える 6

2

セマンティックな順序が重要でない場合は、コンテンツ div の上に右の div を移動すると機能します。

<div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
<div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div>
<div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!...</div>
于 2009-10-17T22:34:17.237 に答える
2

率直に言って申し訳ありませんが、あなたはこれについて間違った方法で進んでいます。問題は「テーブル vs div」ではなく、「テーブル vs ウェブ標準」の問題です。CSS から始めて、すべてを でラップして終了するのは非常に魅力的です<div>。実際には、正しい HTML 要素を使用して含まれるデータを表し、CSS を使用してスタイルを設定することがポイントです。

それを念頭に置いて、ページの実際のコンテンツは何ですか? データのリストですか？一連の段落？実際には表形式のデータである可能性があります。その場合、表が正しい選択でしょうか? それを決定し、適切な HTML を記述したら、CSS を開始できます。必要なスタイルを実現するために HTML 要素を追加しなければならない場合がありますが、構造をハッシュ化し、そのような要素について十分に検討している限りは問題ありません。

于 2009-10-17T22:37:21.497 に答える
1

角を丸くしたい場合、これは良い考えです。

HTML:

<div class="box">
  content here
  <div class="topleft corner"></div>
  <div class="topright corner"></div>
  <div class="bottomleft corner"></div>
  <div class="bottomright corner"></div>
</div>

CSS

.box{
padding:50px;
position:relative; /*this allows positioning child elements relative to this one*/
}

.corner{ position:absolute; width:50px;}

.topleft{ top:0; left:0; background-image:url(tlcorner.gif);}
.topright{ top:0; right:0; background-image:url(trcorner.gif);}
.bottomleft{ bottom:0; left:0; background-image:url(blcorner.gif);}
.bottomright{ bottom:0; right:0; background-image:url(brcorner.gif);}
于 2009-10-18T07:47:21.320 に答える
1

3 列の負のマージン トリック( demo )を使用したいと思うでしょう。

于 2009-10-17T22:32:45.213 に答える
0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:)</title>
<body>
  <p>Text up here...</p>
  <div style="height: 200px; background-color: red;">
    <div style="height: 100%; margin-right: 20%;">
      <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
      <div style="float: left; width: 80%; height: 100%; background-color: yellow;">

This is my Content! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      </div>
      <div style="float: left; width: 30px; height: 100%; background-color: blue;">R</div>
      <div style="clear: both;"></div>
    </div>
  </div>
  <p>Text down here...</p>
</body>
</html>
于 2009-10-17T22:52:09.387 に答える
0

W3C には、いくつかの今後のソリューションがあります。あなたのニーズに最も近いものは、現在、Chrome、Firefox、および Internet Explorer に実装されています ( http://dev.w3.org/csswg/css3-grid-layout )。

CSS グリッド レイアウト

于 2012-10-16T11:04:35.363 に答える