html - CSS流体设计问题

Question

我正在计划一个基于流体设计的布局，其中包含 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

score 0 · Accepted Answer

0

请参阅下面的小提琴链接：

于 2011-10-31T07:39:10.193 回答

1 回答 1