我正在计划一个基于流体设计的布局,其中包含 2 个列,如下所示;
下面是 HTML 代码:
<div id="container">
<div class="fl wd5percent"><img src="titleText.jpg" /></div>
<div class="fl wd95percent"></div>
</div>
这里第一列包含标题文本的图像,剩余宽度用于其他内容。
现在我的问题是,因为这是一个流畅的布局,我不能在任何地方使用“px”宽度......我定义img
为使用max-width:100%
,但是当第 2 列高度更高时,那种会在 titleText 图像下方创建空白空间(或间隙)。
如何定义我的 CSS,以便页面在调整浏览器大小时能够很好地缩放。我的意思是,无论浏览器大小如何,titleText 图像都会显示为占据整个高度,作为第二列的内容高度。
同样,我不能在我的 CSS 中使用 px 宽度或高度。所以我不能说,宽度:200px;高度:100px