0
我创建我的网站,需要我的网页上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列的内容。
我对你的问题是:
我怎么能得到这个工作?
我错过了什么?
请帮帮我。
谢谢。
也许创造的jsfiddle对我们来说,很容易从那里解决它。 –
你的意思是用'position:absolute;左:0;顶部:0;'?如果它只想填充整个宽度并坐在父元素的顶部,则根本不需要任何样式代码。 – Atle
试了一下。它不起作用 – kevstarlive