2列布局缺少內容

我創建我的網站，需要我的網頁上2列布局。2列布局缺少內容

我有這個代碼可用於一列布局。

<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>

與此CSS代碼中的style.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列的內容。

我對你的問題是：

我怎麼能得到這個工作？

我錯過了什麼？

請幫幫我。

謝謝。

來源

2013-10-17 kevstarlive

也許創造的jsfiddle對我們來說，很容易從那裏解決它。 –

你的意思是用'position：absolute;左：0;頂部：0;'？如果它只想填充整個寬度並坐在父元素的頂部，則根本不需要任何樣式代碼。 – Atle

試了一下。它不起作用 – kevstarlive

我已經簡化您的佈局一點，你也許可以在此建：

這是HTML：

<div> 
    <center>2 column layout</center> 
</div> 
<div id="container"> 
    <div id="column1">Coumn 1 content</div> 
    <div id="column2">column 2 content goes here.</div> 
</div>

這是CSS：

#container { 
    font-size: 22px; 
} 
#column1 { 
    float: left; 
    width:50%; 
    background-color: green; 
} 
#column2 { 
    float: left; 
    width:50%; 
    background-color:red; 
}

來源

2013-10-17 13:03:43 Atle

2列布局缺少內容

回答

相關問題