Question

我正在尝试将三列网页布局从HTML表格转换为CSS，但目前还有一个我无法复制的特征。

HTML解决方案允许将照片放入主要文本右侧的列中，但在没有照片的情况下，该列会折叠，主要文本内容会扩展到最终的右侧“间距”栏保持右边距。

到目前为止，我发现在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;
}

由于列是固定宽度的，因此图像标记的删除会在主文本的右侧留下很大的间隙，我在网络搜索中找到的建议都没有显示出令人满意的解决方案 - 通常是右边的崩溃尽管有明显的可用空间，-hand列仍然保持中心列中的文本布局不变。

我想避免会给浏览器兼容性带来问题的解决方案 - 有没有办法在CSS中实现我想要的东西，或者我是否必须坚持使用HTML表格标签？

彼得N。

Answer 1

如果我理解正确，你需要的是如果右栏中没有图像，你的主要内容应该没有“间隙”，或者完整的布局应该看起来像2栏页，如果是这样的话，试试这个：

首先要移动你的

之前

<div class="rh_image"> <div class="main_content">

接下来就像这样调整css：

.main_content {
   min-height: 600px;
   max-height: 2000px;
   margin-left: 0px;
   padding-top: 20px;
   background: #333333;
 }

它应该做的伎俩

抱歉，我刚看到你的小提琴

这是完整代码的链接：http://jsfiddle.net/darkosss/3deMj/

如果右侧列为空，css页面布局的中心列如何向右扩展？

1 个答案: