0

私は2つのdivで簡単な仕事をしています。両方に色付きの境界線が必要で、内側の div はすべてのスペースを使用する必要があります。ここに私のコード：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
   .d1{ width:150px;height:150px;border:solid 10px black;background:red;}
   .d2{ height:100%; width:100%; border:solid 20px blue; background:green;}
</style>
</head>
<body>
   <div class=d1>
       <div class=d2>some text</div>
   </div>
</body>
</html>

しかし、ブラウザー (IE、Chrome) は、境界線と「div」をアーティファクトで表示するように設定したことを認識しません。

誰でもこのバグをキャッチしますか？

4

5 に答える 5

1

代わりにこれを行います：

<style type='text/css'>
    .d1{ width:110px;height:110px;border:solid 10px black;background:blue; padding: 20px;}
    .d2{ height:100%; width:100%; background:green;}​
</style>

基本的に、.d1 の背景色を使用して .d2 の境界線を置き換え、.d1 にパディングを追加して、一種の境界線として機能させるという効果が得られると思います。

マージンまたはパディングを .d2 に追加すると、100% の高さと幅の値が追加され、オーバーフローすることになります。

それが理にかなっていることを願っています。

編集：高さと幅を40px減らすことで20pxのパディングをどのように補正したかに注意してください（左右と上下の両方にパディングが追加され、幅と高さが40px増えるため）

于 2012-08-22T12:10:57.753 に答える
0

親divの幅と高さがわかっている場合は、パーセンテージなしで子に正しいスタイルを設定できるため、このjsFiddleが機能する場合があります。

于 2012-08-22T12:14:31.253 に答える
0

境界線は幅/高さに含まれていないため、150x150 は 10px の境界線を持つ 170x170 になります。

2 つのソリューション:

  1. 境界線を考慮して、divの幅/高さを増やします
  2. より多くの div を使用し、境界線を忘れました

これは、両方のソリューションを示すJsfiddleです。

于 2012-08-22T12:15:01.173 に答える
0

境界線の太さを指定したため、高さと幅はそれを考慮せず、境界線の内側にネストされて表示されます。私が正しく理解している場合、問題の解決策は次のように達成できます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type='text/css'> 
   .d1{ width:150px;height:150px;overflow:auto;border: solid 10px black;background:red;} 
   .d2{ height:73%; width:73%;border: solid 20px blue; background:green;} 
</style> 
</head> 
<body> 
   <div class="d1"> 
       <div class="d2">some text</div> 
   </div> 
</body> 
</html>
于 2012-08-22T12:21:52.547 に答える
0

基本的に、Html ボックス モデルに問題があります。

自分で数学を理解するか、サポートする必要があるブラウザーに応じて、ボックスモデルの動作を変更する新しい「ボックスサイズ」CSS スタイルがあります。

これがどのように使用できるかを示すフィドルです：

http://jsfiddle.net/EHUab/

于 2012-08-22T12:30:46.200 に答える