我正在尝试将三列网页布局从 HTML 表格转换为 CSS，但是到目前为止我无法复制一个特征。
HTML 解决方案允许通过 php 将照片放置在正文右侧的列中，但是在没有照片的情况下，该列会折叠，并且正文内容会延伸到最终的右侧“间距”列以保持右侧边距。
到目前为止，我发现在 CSS 中实现三列数组的唯一方法是使用固定宽度的容器，并为定义列的 div 标签使用固定宽度样式以及浮动。HTML代码的基础是：
<div class="container">
<div class="title_strip"><img src="headline_text.png"></div>
<div class="hdr_img_space"><img src="leaf_header.jpg"></div>
<div class="lh_col"><p align="center">ADMINISTRATION<br/>[WEBMASTER]</p></div>
<div class="main_content"><p>This is the location for the main administrative page
content, and will hopefully be able to contain all the necessary text, even if it
over-runs</p></div>
<div class="rh_image"><img class="rh" src="photo.jpg"></div>
<br style="clear: both"></div>
核心 CSS 样式是：
body {
margin: 0px;
padding: 0px;
background-color: #200542;
}
p {color: #CCCCCC; font-family: arial, sans-serif; font-size: 14pt; line-height:1.4em
}
.container {
width: 1000px;
min-height: 600px;
max-height: 2200px;
margin: 8px auto 0 auto;
background: #333333;
padding: 0px;
}
.main_content {
float: left;
min-height: 600px;
max-height: 2000px;
margin-left: 0px;
width: 516px;
padding-top: 20px;
background: #333333;
}
.lh_col {
float: left;
width: 200px;
min-height: 600px;
max-height: 2000px;
padding-top: 20px;
padding-left: 20px;
padding-right: 24px;
margin: 0;
background: #333333;
}
.rh_image {
width: 200px;
min-height: 620px;
max-height: 2000px;
float: right;
padding-top 20px;
padding-left: 20px;
padding-right: 20px;
background: #333333;
}
img {
display: block;
}
.rh {
margin-top: 40px;
}
因为列的宽度是固定的，删除图像标签会在正文右侧留下很大的间隙，我在网络搜索中找到的建议都没有显示出令人满意的解决方案——通常是右侧列的折叠尽管明显有更多空间可用，但中心栏中的文本布局保持不变。
我想避免会导致浏览器兼容性问题的解决方案 - 有什么方法可以在 CSS 中实现我想要的，还是我必须坚持现在不推荐使用 HTML 表格标签？
彼得·N。