[英]CSS fluid design issue
I am planning a fluid-design based layout with 2 cols as follows; 我正在计划一个基于流体设计的布局,具有2个列,如下所示;
Below is the HTML code: 以下是HTML代码:
<div id="container">
<div class="fl wd5percent"><img src="titleText.jpg" /></div>
<div class="fl wd95percent"></div>
</div>
Here the 1st col contains the image for title text and remaining width is used for other content. 这里的第一栏包含标题文字的图像,其余宽度用于其他内容。
Now my issue is as this is a fluid layout, I cannot use "px" width anywhere... I define img
to use max-width:100%
, but that kind of creates blank space (or gap) below the titleText image when the 2nd col height is more. 现在我的问题是,这是一个不稳定的布局,我不能在任何地方使用“ px”宽度...我定义
img
以使用max-width:100%
,但是这种类型在titleText图像下方创建空白(或间隙)第二列的高度更高。
How do I define my CSS such that the page scales well as the browser is resized. 如何定义CSS,以便在调整浏览器大小时可以很好地缩放页面。 By that, I mean whatever be the browser size, the titleText image would be displayed to occupy full height as the content height of 2nd col..
我的意思是,无论浏览器大小如何,titleText图像都将显示为占据第二列内容高度的全部高度。
Again, I cannot use px width or height anywehere in my CSS. 同样,我不能在CSS中使用px width或height。 So I cannot say, width:200px;height:100px
所以我不能说宽度:200px;高度:100px
Please see the below fiddle link: 请查看下面的小提琴链接:
http://jsfiddle.net/thilakar/xKrws/2/ http://jsfiddle.net/thilakar/xKrws/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.