0

私は次のhtmlを持っています:

<!DOCTYPE html>
<html>
    <head>
        <title>JBA</title>
        <style type="text/css">
            body {
                margin:0;
                padding:0;
            }
            #layout {
              float: left;
            }
            #title {
              padding: 10px; 
              border: 1px solid #ccc; 
              position: relative;
            }
            #content {
              position: absolute;
              top: 26px;
              left: 0;
              right: 0;
              bottom: 0;
              border: 1px solid #ccc; 
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <label id="title">Below is content:</label>
            <div id="content">
            </div> 
        </div>
    </body>
    <script>
    </script>
</html>

#title ラベルのすぐ下に #content div を配置する必要があります。ただし、float と position の設定は変更しないでください。では、#content のトップを計算するにはどうすればよいでしょうか。Chrome では 26px で動作するようですが、IE では 28px にする必要があります。なんで？

4

4 に答える 4

0

「#layout」divに相対的な位置を与える

#layout {
  float: left;
  position:relative;
}
于 2013-05-31T05:27:49.027 に答える
0

このLINKのようなものを期待していますか

CSS のいくつかの変更:

       body {
                margin:0;
                padding:0;
            }
            #layout {
              float: left;
            }
     #title {
              padding: 5px; 
              border: 1px solid #ccc; 
              float:left;
            }
   #content {
              clear:both;
              width:400px;
              height:400px;
              border: 1px solid #ccc; 
            }
于 2013-05-31T05:50:54.280 に答える
0

#content ではパディングとマージンを 0 に設定する必要があります。これは、ブラウザーによってレンダリングが異なるためです (設定されていなくても)。

于 2013-05-31T07:23:51.103 に答える
0

クロムとIE9でテストしました。両方の位置で上: 28 は正常に動作しています。スクリーンショットを添付します。ここに画像の説明を入力

于 2013-05-31T05:35:10.993 に答える