0

新しいHTMLページで作業していて、テーブルのないレイアウトを使用したいと思います。ここに続くのはページの一部にすぎないことを覚えておいてください、しかしそれは私がやろうとしていることの明確な絵を描いていると思います。

以下のHTMLは、テキストを含む6つのセルをレンダリングすることを目的としています。セルのサイズを適切に設定して、内部にテキストが含まれるようにします。

私が抱えている問題は、境界線が正しく描画されていないことです。IEとFirefoxの両方で、2つの問題が発生します。

1）境界線の1つがテーブルの外側に描画されます。

2）最初の行のセル間の境界線が不完全に描画されます。

<!DOCTYPE html>
<html>
<head>
<style>

html
{
}
.reviewRow 
{    
    clear:both;    
}
.reviewBlock 
{
 float:left; 
 border-top: 1px solid #444; 
 border-left: 1px solid #444;
}
.rightBorder
{
    border-right: 1px solid #444;
}
.bottomBorder
{
    border-bottom: 1px solid #444;   
}
</style>
</head>

<body>
<div class='reviewRow'>
    <div style="width:200px;" class='reviewBlock'>      
        THIS TEXT IS MUCH LONGER THAN THE TEXT IN THE OTHER CELLS
    </div>
    <div style="width: 225px" class='reviewBlock'>      
        ABC
    </div>
    <div style="width: 100px" class="reviewBlock rightBorder">      
        December 25, 2012
    </div>
</div>
<div class='reviewRow bottomBorder'>
    <div style="width:300px;" class='reviewBlock'>      
        Hello, World!
    </div>
    <div style="width: 125px" class='reviewBlock'>      
        123
    </div>
    <div style="width: 100px" class="reviewBlock rightBorder">      
        May 1, 2013
    </div>
</div>
<div style='clear:both;'></div>
</body>
</html>
4

4 に答える 4

4

テーブルを使用してレイアウトを作成しないという他の人の言うことはしないでください。ただし、表形式のデータに関しては、テーブルの作成にdivを使用しても意味がない場合は、デザインにテーブルを使用しないでください。レイアウトですが、表形式のデータには使用する必要があります

それでも使用したい場合はこれを参照することができます

于 2012-12-12T15:09:44.627 に答える
1

ちなみに、質問に答えるには... display：table、table-cell、table-row（CSS3の場合）を使用できます

しかし、私はエイリアン氏に同意します。表形式のデータにはテーブルを使用するだけです。

于 2012-12-12T15:15:42.750 に答える
1

明示的に指定しない限り、html要素の高さはその中のコンテンツに基づいて計算されます。

2番目のdivは、ABCを表示するのに必要な高さだけを使用しているため、境界線はその分だけ表示されます。これを修正するには、各divに特定の高さを指定して、希望どおりに表示されるようにする必要があります。

表形式でデータを表示しようとしている場合は、テーブルを使用してください。それらはその目的のためだけにあります。見栄えを良くするために、明らかにスタイルを設定できます。

于 2012-12-12T15:16:31.447 に答える
0

表形式のデータに対してこれを実行しようとしている場合は、必ずその目的のテーブルを使用してください。そうしないことは、Excelがより優れたツールであるときにPhotoshopを使用してスプレッドシートを作成しようとするようなものではありません。

colspan属性を使用して、セルが占める列の数を変更できます。もちろん、デフォルトでは、セルは1列（colspan="1"）を占めますが、さらに多くを占める必要がある場合は、数値を変更するだけです。。を使用して行に対して同じことを行うことができますrowspan。

于 2012-12-12T15:19:36.460 に答える