5

テーブルの代わりに div を使用して、コンテンツの周りにボックスのスタイルを設定しようとしています。コンテンツは任意のサイズにすることができ、ブラウザのサイズを任意に変更できる必要があります。コンテンツを含めるには、背景色と境界線が必要です。これはテーブルでうまく機能します。div を同じように動作させるにはどうすればよいですか?

注: 改行しないスペースが失われていたため、「_」を追加しました。

サンプルページ

サンプル画像

代替テキスト
(ソース: c3o.com )

コンテンツ：

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
4

7 に答える 7

2

本当にテーブルを使用したくない場合は、次のようにすることができます。

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

次回この種の問題が発生したときは、giveupandusetables.comにアクセスしてください。

于 2009-04-08T16:33:22.750 に答える
2

私が知っているクロスブラウザ対応の簡単な方法はありません。

少なくともFirefoxでは、divを設定することでシミュレートされたテーブルを作成できます

display:table;
display:table-row;
display:table-cell;

これらの div がテーブル要素のように機能するようにします。次に、ボックスにはそのコンテンツが含まれます。それが良い解決策であるかどうかは議論の余地があります。

私自身、ページレイアウトに関して同様の問題を抱えています。通常、min-width と overflow:auto; を設定して解決しました。

于 2009-04-06T22:37:31.550 に答える
0

これは機能します（実際には、ie7のテーブルよりもうまくまとめられています）

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}

注：両方のボックスに同じ左右のパディングが必要であるか、1つが少し突き出ている必要があります。

于 2009-04-07T08:59:30.620 に答える
0

まず、セマンティックマークアップを使用する必要があります。何かがヘッダーであり、コンテンツである場合は、ヘッダータグと段落タグでそのようにマークアップします。これは、マークアップとテーブルのようなスタイルをエミュレートしようとした場合の「テーブルウェイ」の考え方から抜け出すのに役立ちます。マークアップを最初に、CSSを後にすることができます。

以下はあなたが望むことをするはずです：

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

マークアップとスタイルを別々に考えることは、CSS Zen Masteryへの道です：o）

于 2009-04-07T09:35:57.880 に答える
0

フロートは必要ありませんが、マージンとパディングの使用を混同しているようです。必要に応じて、スタイルを次のように微調整します。

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

ボックスのパディングを余白に変更し、境界線をボックスに移動し、ヘッダーに下線を追加しました。

于 2009-04-08T15:52:54.893 に答える
0

1 つの方法は、ボックスを浮かせることです。float:left; を追加します。ボックス、ボックス ヘッダー、およびボックス ボディに。clear:both; を追加します。box-header の下に強制するには、box-body にします。おそらく、その後に続くコンテンツにも clear プロパティを追加する必要があります。

ただし、box-header と box-body の右端を揃えることはできません。幅を同じにしたい場合は、本当にテーブルが必要です。テーブルは、同じ列内のすべてのセルの幅を共有するためのツールです。

他のアイデアについては、この SO questionを確認してください。

于 2009-04-07T00:01:35.857 に答える