0

サイトを作成していて、ページに 2 列のレイアウトが必要です。

このコードは、1 列のレイアウトで使用できます。

 <HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<?php include_once('header.php'); ?> 

            <div class="header_02"><center>one column layout</center></div>

<div style="position:relative">
<div>
<div style="position:absolute; left:30; top:30;">
    <img src="images/xclo.jpg" width="350" height="215">
  </div>  </div>
  <div style="position:absolute; left:0; top:0;">
    <a href="foo.html"><img src="images/frame.png" width="400" height="400"></a>
  </div>
</div>

column 2 content goes here.          

</div></div>
<?php include_once('footer.php'); ?>  

</body>
</HTML>

これは正常に表示されます。

ただし、これを次のように変更すると:

<HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<?php include_once('header.php'); ?> 

            <div class="header_02"><center>2 column layout</center></div>

<div style="position:relative">
<div id="container">
<!-- Start Column 1 -->
<div id="column1">
  <div>
<div style="position:absolute; left:30; top:30;">
    <img src="images/xclo.jpg" width="350" height="215">
  </div>  </div>
  <div style="position:absolute; left:0; top:0;">
    <a href="foo.html"><img src="images/frame.png" width="400" height="400"></a>
  </div>
</div>
 </div>
<div id="column2">
column 2 content goes here.          

</div></div>
<?php include_once('footer.php'); ?>  

</body>
</HTML>

style.css のこの css コードで

#container {
  float: left;
  width: 98%;
  position:relative;
  font-size: 22px;
}

#column1, #column2 {
  width: 45%;
  float: left; 
  position:relative;
}
          #column1 { 
           overflow:hidden;
          }

          #column2 {
           border-left: 1px solid #000000;
           padding-left:30px;
          }

列 1 の内容は表示されません。

あなたへの私の質問はこれです：

どうすればこれを機能させることができますか？

私は何かを逃していますか？

私を助けてください。

ありがとうございました。

4

1 に答える 1