我很难将HTMLdiv的高度与PHP生成的表的内容进行缩放。
我使用的表可能会更改大小,所以我不想静态设置父div的高度,但我似乎无法使其正常工作。我没有漂浮任何东西。
这个页面的主要脚本是这样的:
<div id="wrapper">
<div id="contentmain">
<div id="contentleft">
<?php
include ('get_table.php');
?>
</div>
<div id="contentright">
</div>
</div>
</div>
我认为,如果#wrapper和#contentleft具有height:auto或height-unset,那么表将决定这些分区的大小,但相反,表只是单独放置,延伸到空白区域,而div则像细线一样位于顶部。
CSS:
#contentmain
{
width:940px;
height: 1164px;
background-color:aqua;
margin: 10px 10px 0px 10px;
}
#contentleft
{
width: 700px;
height:inherit;
background-color: #CAE2ED;
position:absolute;
}
table
{
border-spacing:8px;
font-family:Georgia, serif;
padding:0px;
box-shadow:1px 0px 5px 0px #000000;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin:0 auto;
background-color:white;
/*border-collapse: separate;
border-spacing: 0 10px;*/
}
注意:contentleft正在适当地调整表的大小,但contentmain和wrapper不是。感谢您的帮助!
试试这个css:
#contentmain
{
width:940px;
height: 1164px;
background-color:aqua;
margin: 10px 10px 0px 10px;
display:inline;
}
#contentleft
{
width: 700px;
height:inherit;
background-color: #CAE2ED;
position:absolute;
display:inline;
}
table
{
border-spacing:8px;
font-family:Georgia, serif;
padding:0px;
box-shadow:1px 0px 5px 0px #000000;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin:0 auto;
background-color:white;
display:inline;
/*border-collapse: separate;
border-spacing: 0 10px;*/
}
您尝试过使用clearfix方法吗?http://jsfiddle.net/zqtWL/
. clearfix{display:block;clear:both; float:none; width:100%;}
您可以尝试以下操作:
-将#contentmain显示设置为block
-将#contentleft和#contentright显示设置为内联块。
#contentmain{display:block;…}
#contentleft{display:inline block;…}
#contentright{display:inline block;..}