61,114
社区成员
发帖
与我相关
我的任务
分享CSS+DIV实现图片自适高度度图片框问题
上传不了图~~~
有一个问题,www.gzjd.gov.cn广州金盾网,我现在想实现的效果就像左边的那通知公告，而且想自适应高度，做了好久都没能做出来。
上面标题和下面边框已经没什么技术含量了，就是中间那块左右两边各有两张图构成，一张是高124px宽15px的普通图，另一张是宽15px，高1px的要来自适应延伸的图
现在不论我用什么方法都做不出自适应高度增长的效果。我所说的自适应高度是自适应内容高度，如果字多了，就用那高1px宽15px的图作自动填充。在这里请教各位大大~~~~感激不尽
有一个问题,www.gzjd.gov.cn广州金盾网,我现在想实现的效果就像左边的那通知公告，而且想自适应高度，做了好久都没能做出来。
上面标题和下面边框已经没什么技术含量了，就是中间那块左右两边各有两张图构成，一张是高124px宽15px的普通图，另一张是宽15px，高1px的要来自适应延伸的图
现在不论我用什么方法都做不出自适应高度增长的效果。我所说的自适应高度是自适应内容高度，如果字多了，就用那高1px宽15px的图作自动填充。在这里请教各位大大~~~~感激不尽
...全文
请发表友善的回复…
发表回复
乐居猫 2011-04-21
- 打赏
- 举报
广告无处不在
stou328 2008-09-26
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cfbcvb</title>
<style type="text/css">
<!--
#t1 {
height: 20px;
width: 172px;
background-color: #FF0000;
}
#t2 {
width: 172px;
background-color: #00FF00;
}
#t3 {
height: 20px;
width: 172px;
background-color: #0000FF;
}
-->
</style>
<script language="javascript">
<!--
function opens(){
var t2=document.getElementById("t2")
t2.innerHTML="ssssssssssss";
}
function closes(){
var t2=document.getElementById("t2")
t2.innerHTML="";
}
-->
</script>
</head>
<body>
<div id="t1" onMouseOver="opens();"></div>
<div id="t2" onMouseOut="closes();"></div>
<div id="t3"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cfbcvb</title>
<style type="text/css">
<!--
#t1 {
height: 20px;
width: 172px;
background-color: #FF0000;
}
#t2 {
width: 172px;
background-color: #00FF00;
}
#t3 {
height: 20px;
width: 172px;
background-color: #0000FF;
}
-->
</style>
<script language="javascript">
<!--
function opens(){
var t2=document.getElementById("t2")
t2.innerHTML="ssssssssssss";
}
function closes(){
var t2=document.getElementById("t2")
t2.innerHTML="";
}
-->
</script>
</head>
<body>
<div id="t1" onMouseOver="opens();"></div>
<div id="t2" onMouseOut="closes();"></div>
<div id="t3"></div>
</body>
</html>
cloudgamer 2008-09-25
- 打赏
- 举报
把中间部分做一个背景图repeat y
Cyril_Tam 2008-09-25
- 打赏
- 举报
说明一下
#main的背景图是头部整张图,包括圆角部份
#middle 是一个1px高的图,用于填充,repeat-y
#bottom的背景图是底部整张图,包括圆角部份
#top 是一个空白DIV,用于撑住顶部,令middle的文字可以从空白处开始.
这是一个大概的思路,可以自己改进
#main的背景图是头部整张图,包括圆角部份
#middle 是一个1px高的图,用于填充,repeat-y
#bottom的背景图是底部整张图,包括圆角部份
#top 是一个空白DIV,用于撑住顶部,令middle的文字可以从空白处开始.
这是一个大概的思路,可以自己改进
Cyril_Tam 2008-09-25
- 打赏
- 举报
时间关系,做个大概的样子给你,图片都是从JD那个NOTICE弄来的.细节方面需要自己慢慢调整.还有FF兼容问题也要细调
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#main{width:208px; background-image:url(new_top_bg.gif); background-repeat:no-repeat; float:left}
#top{width:208px; height:45px; float:left}
#middle{ width:208px; background-image:url(new_bg.gif); background-repeat:repeat-y; float:left;}
#bottom{width:208px; background-image:url(new_bottom.gif); background-repeat:no-repeat; float:left}
ul li{ overflow:auto;WORD-WRAP: break-word; padding-right:15px}
</style>
</head>
<body>
<div id="main">
<!--头部-->
<div id="top"></div>
<!--中间-->
<div id="middle">
<ul>
<li>1111111111111111</li>
<li>222222222222222222</li>
<li>3333333333333333333333</li>
<li>4444444444444444444</li>
<li>555555555555555555555555</li>
<li>666666666666666666666666</li>
<li>1111111111111111</li>
<li>222222222222222222</li>
<li>3333333333333333333333</li>
<li>4444444444444444444</li>
<li>555555555555555555555555</li>
<li>666666666666666666666666</li>
</ul>
</div>
<!--底部-->
<div id="bottom"></div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#main{width:208px; background-image:url(new_top_bg.gif); background-repeat:no-repeat; float:left}
#top{width:208px; height:45px; float:left}
#middle{ width:208px; background-image:url(new_bg.gif); background-repeat:repeat-y; float:left;}
#bottom{width:208px; background-image:url(new_bottom.gif); background-repeat:no-repeat; float:left}
ul li{ overflow:auto;WORD-WRAP: break-word; padding-right:15px}
</style>
</head>
<body>
<div id="main">
<!--头部-->
<div id="top"></div>
<!--中间-->
<div id="middle">
<ul>
<li>1111111111111111</li>
<li>222222222222222222</li>
<li>3333333333333333333333</li>
<li>4444444444444444444</li>
<li>555555555555555555555555</li>
<li>666666666666666666666666</li>
<li>1111111111111111</li>
<li>222222222222222222</li>
<li>3333333333333333333333</li>
<li>4444444444444444444</li>
<li>555555555555555555555555</li>
<li>666666666666666666666666</li>
</ul>
</div>
<!--底部-->
<div id="bottom"></div>
</div>
</body>
</html>
sjmlsxp 2008-09-24
- 打赏
- 举报
超级汗~ 原来你这么多的代码就只有做一个公告栏？
<div>
<div id="noticeTop"></div><--背景图片包含上面里外的四个圆角-->
<div id="noticeMid"><--背景图片用高1px，宽200px，repeat-y-->
<ul>
<li>……</li>
<li>……</li>
<li>……</li>
……
</ul>
</div>
<div id="noticeBottom"></div><--背景图片包含上面里外的四个圆角-->
</div>
基本上这样就够了啊~
图片的话要灵活使用div+css的特性，适当的修改
如果还是用的table的思路，那就不用学div+css了
<div>
<div id="noticeTop"></div><--背景图片包含上面里外的四个圆角-->
<div id="noticeMid"><--背景图片用高1px，宽200px，repeat-y-->
<ul>
<li>……</li>
<li>……</li>
<li>……</li>
……
</ul>
</div>
<div id="noticeBottom"></div><--背景图片包含上面里外的四个圆角-->
</div>
基本上这样就够了啊~
图片的话要灵活使用div+css的特性，适当的修改
如果还是用的table的思路，那就不用学div+css了
ivanfanggz 2008-09-24
- 打赏
- 举报
[Quote=引用 10 楼 sjmlsxp 的回复:]
高度的话，在IE6中height的功能和IE7 FF都支持的min-height效果上是一致的
你可以这样试试：
min-height：200px;_height:200px;
或者就是不指定高度，不指定默认就是自适应的
布局的话，就是left middle right分这样三列
应该不会有影响的
[/Quote]
样例子中的话，因为标题图片和两边的框图片的宽不一致，所以，我就用了上中下的方式布局。
而这里的中的话，由于我要自适应，所以又把中分为了中上和中下，中上为固定长度中下为自适应。
只是，因为我边框的中有分中上和上下，但内容的中就理应不分中上和上下而只有一个中，所以，我现在最大的问题是，内容DIV位置要靠在边框的中上的水平线同时它的伸长要让边框的中下所感知，让边框中的中下DIV跟着他自适应~~~~~~应该是思路出了点问题，这样做，不知为什么实现不了
高度的话，在IE6中height的功能和IE7 FF都支持的min-height效果上是一致的
你可以这样试试：
min-height：200px;_height:200px;
或者就是不指定高度，不指定默认就是自适应的
布局的话，就是left middle right分这样三列
应该不会有影响的
[/Quote]
样例子中的话，因为标题图片和两边的框图片的宽不一致，所以，我就用了上中下的方式布局。
而这里的中的话，由于我要自适应，所以又把中分为了中上和中下，中上为固定长度中下为自适应。
只是，因为我边框的中有分中上和上下，但内容的中就理应不分中上和上下而只有一个中，所以，我现在最大的问题是，内容DIV位置要靠在边框的中上的水平线同时它的伸长要让边框的中下所感知，让边框中的中下DIV跟着他自适应~~~~~~应该是思路出了点问题，这样做，不知为什么实现不了
sjmlsxp 2008-09-24
- 打赏
- 举报
高度的话，在IE6中height的功能和IE7 FF都支持的min-height效果上是一致的
你可以这样试试：
min-height：200px;_height:200px;
或者就是不指定高度，不指定默认就是自适应的
布局的话，就是left middle right分这样三列
应该不会有影响的
你可以这样试试：
min-height：200px;_height:200px;
或者就是不指定高度，不指定默认就是自适应的
布局的话，就是left middle right分这样三列
应该不会有影响的
街头小贩 2008-09-24
- 打赏
- 举报
[Quote=引用 7 楼 ivanfanggz 的回复:]
引用 5 楼 sjmlsxp 的回复:
汗~ 要做重构？
还以为本来就是div+css的呢
找了半天没找到是要改哪里
我在学CSS+DVI布局，因为刚学没多久，所以想对自己严格一点，所有东西都用CSS+DIV。代码不一定要看的，我只想知道，要做到我说的那种效果的话用什么思路来做会好点呢？谢谢
[/Quote]
凡事都有个度！我学CSS时也想实现左右两列自适应高度！现在也没实现出来！,用td就好！，CSS＋DIV只是一种MV(C,一般C指的是javascript)实践！MSDN的左右用的也是td,只要table写好了也不比DIV＋CSS慢的！就像问是五笔打的快还是拼音打字快一样
引用 5 楼 sjmlsxp 的回复:
汗~ 要做重构？
还以为本来就是div+css的呢
找了半天没找到是要改哪里
我在学CSS+DVI布局，因为刚学没多久，所以想对自己严格一点，所有东西都用CSS+DIV。代码不一定要看的，我只想知道，要做到我说的那种效果的话用什么思路来做会好点呢？谢谢
[/Quote]
凡事都有个度！我学CSS时也想实现左右两列自适应高度！现在也没实现出来！,用td就好！，CSS＋DIV只是一种MV(C,一般C指的是javascript)实践！MSDN的左右用的也是td,只要table写好了也不比DIV＋CSS慢的！就像问是五笔打的快还是拼音打字快一样
ivanfanggz 2008-09-24
- 打赏
- 举报
[Quote=引用 6 楼 Cyril_Tam 的回复:]
原来你想用div+css
如果用div+css设置起来比较麻烦,而且调试起来难度大,特别是IE和FF兼容问题.
如果是用tr,td的话那就好办了.
一个头,一个尾,中间用三个td.
金盾是用了三个tr,里边分别放置一个table
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/index_10.gif">
<tr>
<td align="left"> 这里设置左上角拐角图片 </td…
[/Quote]
首先非常谢谢你的解释。不过，我发这贴的主要问题是想了解怎么用CSS+DIV解决图片框的自适应高度的问题，重点在CSS+DIV上。等结帖后再给你补加分，谢谢了，再次非常谢谢
原来你想用div+css
如果用div+css设置起来比较麻烦,而且调试起来难度大,特别是IE和FF兼容问题.
如果是用tr,td的话那就好办了.
一个头,一个尾,中间用三个td.
金盾是用了三个tr,里边分别放置一个table
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/index_10.gif">
<tr>
<td align="left"> 这里设置左上角拐角图片 </td…
[/Quote]
首先非常谢谢你的解释。不过，我发这贴的主要问题是想了解怎么用CSS+DIV解决图片框的自适应高度的问题，重点在CSS+DIV上。等结帖后再给你补加分，谢谢了，再次非常谢谢
ivanfanggz 2008-09-24
- 打赏
- 举报
[Quote=引用 5 楼 sjmlsxp 的回复:]
汗~ 要做重构？
还以为本来就是div+css的呢
找了半天没找到是要改哪里
[/Quote]
我在学CSS+DVI布局，因为刚学没多久，所以想对自己严格一点，所有东西都用CSS+DIV。代码不一定要看的，我只想知道，要做到我说的那种效果的话用什么思路来做会好点呢？谢谢
汗~ 要做重构？
还以为本来就是div+css的呢
找了半天没找到是要改哪里
[/Quote]
我在学CSS+DVI布局，因为刚学没多久，所以想对自己严格一点，所有东西都用CSS+DIV。代码不一定要看的，我只想知道，要做到我说的那种效果的话用什么思路来做会好点呢？谢谢
Cyril_Tam 2008-09-24
- 打赏
- 举报
原来你想用div+css
如果用div+css设置起来比较麻烦,而且调试起来难度大,特别是IE和FF兼容问题.
如果是用tr,td的话那就好办了.
一个头,一个尾,中间用三个td.
金盾是用了三个tr,里边分别放置一个table
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/index_10.gif">
<tr>
<td align="left"> 这里设置左上角拐角图片 </td>
<td align="left"> 这里设置顶部中间图片 </td>
<td align="right"> 这里设置右上角拐角图片 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"> 中间部份左边线填充图 </td>
<td align="left"> 中间内容</td>
<td align="right"> 中间部份右边线填充图 </td>
</tr>
</table>
</td>
</tr>
这样,如果中间内容不断增加的话,中间TD就会一直往下扩大,这样看起来就像自适应高度了
总之你可以把整个table设成三行三列
四个角放拐角图片, 第一行和第三行中间放顶和底的中间图, 第二行两边的单元格就填充边线
如果用div+css设置起来比较麻烦,而且调试起来难度大,特别是IE和FF兼容问题.
如果是用tr,td的话那就好办了.
一个头,一个尾,中间用三个td.
金盾是用了三个tr,里边分别放置一个table
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/index_10.gif">
<tr>
<td align="left"> 这里设置左上角拐角图片 </td>
<td align="left"> 这里设置顶部中间图片 </td>
<td align="right"> 这里设置右上角拐角图片 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"> 中间部份左边线填充图 </td>
<td align="left"> 中间内容</td>
<td align="right"> 中间部份右边线填充图 </td>
</tr>
</table>
</td>
</tr>
这样,如果中间内容不断增加的话,中间TD就会一直往下扩大,这样看起来就像自适应高度了
总之你可以把整个table设成三行三列
四个角放拐角图片, 第一行和第三行中间放顶和底的中间图, 第二行两边的单元格就填充边线
sjmlsxp 2008-09-24
- 打赏
- 举报
汗~ 要做重构？
还以为本来就是div+css的呢
找了半天没找到是要改哪里
还以为本来就是div+css的呢
找了半天没找到是要改哪里
ivanfanggz 2008-09-24
- 打赏
- 举报
[Quote=引用 3 楼 Cyril_Tam 的回复:]
其实就是三个tr
第一个tr,就是"通知公告"的头
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/index_10.gif">
<tr>
<td align="left"> <img src="images/index_9.gif" width="121" height="38" /> </td>
…
[/Quote]
首先,我不想用table做。第二，我想实现的是自适应高度同时不影响布局。第三，我想至少在FF和IE下显示正常。谢谢
我想来想去都做来做去都实现不了~~~~
附上我自己做到目前为止的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#notice{ width:200px; height:100px;}
#noticeTop{ width:100%; float:left; clear:both;}
#noticeTopLeft{ background:url(images/notice/noticeTitle.gif); width:121px; height:38px; float:left; clear:left; }
#noticeTopCenter{ background:url(images/notice/noticeTitle_2.gif) repeat-x; width:69px; height:38px; float:left;}
#noticeTopRight{ background:url(images/notice/noticeTitleRight.gif); width:10px; height:38px; float:left;}
#noticeMiddle{ width:100%; float:left; clear:both;}
#noticeMiddleLeft{ background:url(images/notice/noticeLeft.gif); width:15px; height:124px; float:left; clear:left;}
#noticeMiddleCenter{ float:left; width:100%;}
#noticeMiddleRight{ background:url(images/notice/noticeRight.gif); width:15px; height:124px; float:right; clear:right;}
#noticeExtendLeft{ background:url(images/notice/noticeLeft_2.gif) repeat-y; width:15px; float:left; clear:left; height:100%;}
#noticeExtendRight{ background:url(images/notice/noticeRight_2.gif) repeat-y; width:15px; float:right; clear:right; height:100%; }
#noticeBottom{ width:100%; float:left; clear:both;}
#noticeBottomLeft{ background:url(images/notice/noticeTitleLeft_3.gif) no-repeat; width:15px; height:8px; float:left; clear:left;}
#noticeBottomCenter{ background:url(images/notice/noticeFooter.gif) repeat-x; height:8px; float:left; width:170px;}
#noticeBottomRight{ background:url(images/notice/noticeTitleRight_3.gif) no-repeat; width:15px; height:8px; float:right; clear:right;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="notice">
<div id="noticeTop">
<div id="noticeTopLeft"></div>
<div id="noticeTopCenter"></div>
<div id="noticeTopRight"></div>
</div>
<div id="noticeMiddle">
<div id="noticeMiddleLeft"></div>
<!--<div id="noticeExtendLeft"></div>-->
<div id="noticeMiddleRight"></div><div id="noticeMiddleCenter">fds</div>
<!--<div id="noticeExtendRight"></div>-->
</div>
<div id="noticeBottom">
<div id="noticeBottomLeft"></div>
<div id="noticeBottomCenter"></div>
<div id="noticeBottomRight"></div>
</div>
</div>
</body>
</html>
其实就是三个tr
第一个tr,就是"通知公告"的头
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/index_10.gif">
<tr>
<td align="left"> <img src="images/index_9.gif" width="121" height="38" /> </td>
…
[/Quote]
首先,我不想用table做。第二，我想实现的是自适应高度同时不影响布局。第三，我想至少在FF和IE下显示正常。谢谢
我想来想去都做来做去都实现不了~~~~
附上我自己做到目前为止的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#notice{ width:200px; height:100px;}
#noticeTop{ width:100%; float:left; clear:both;}
#noticeTopLeft{ background:url(images/notice/noticeTitle.gif); width:121px; height:38px; float:left; clear:left; }
#noticeTopCenter{ background:url(images/notice/noticeTitle_2.gif) repeat-x; width:69px; height:38px; float:left;}
#noticeTopRight{ background:url(images/notice/noticeTitleRight.gif); width:10px; height:38px; float:left;}
#noticeMiddle{ width:100%; float:left; clear:both;}
#noticeMiddleLeft{ background:url(images/notice/noticeLeft.gif); width:15px; height:124px; float:left; clear:left;}
#noticeMiddleCenter{ float:left; width:100%;}
#noticeMiddleRight{ background:url(images/notice/noticeRight.gif); width:15px; height:124px; float:right; clear:right;}
#noticeExtendLeft{ background:url(images/notice/noticeLeft_2.gif) repeat-y; width:15px; float:left; clear:left; height:100%;}
#noticeExtendRight{ background:url(images/notice/noticeRight_2.gif) repeat-y; width:15px; float:right; clear:right; height:100%; }
#noticeBottom{ width:100%; float:left; clear:both;}
#noticeBottomLeft{ background:url(images/notice/noticeTitleLeft_3.gif) no-repeat; width:15px; height:8px; float:left; clear:left;}
#noticeBottomCenter{ background:url(images/notice/noticeFooter.gif) repeat-x; height:8px; float:left; width:170px;}
#noticeBottomRight{ background:url(images/notice/noticeTitleRight_3.gif) no-repeat; width:15px; height:8px; float:right; clear:right;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="notice">
<div id="noticeTop">
<div id="noticeTopLeft"></div>
<div id="noticeTopCenter"></div>
<div id="noticeTopRight"></div>
</div>
<div id="noticeMiddle">
<div id="noticeMiddleLeft"></div>
<!--<div id="noticeExtendLeft"></div>-->
<div id="noticeMiddleRight"></div><div id="noticeMiddleCenter">fds</div>
<!--<div id="noticeExtendRight"></div>-->
</div>
<div id="noticeBottom">
<div id="noticeBottomLeft"></div>
<div id="noticeBottomCenter"></div>
<div id="noticeBottomRight"></div>
</div>
</div>
</body>
</html>
Cyril_Tam 2008-09-24
- 打赏
- 举报
其实就是三个tr
第一个tr,就是"通知公告"的头
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/index_10.gif">
<tr>
<td align="left"><img src="images/index_9.gif" width="121" height="38" /></td>
<td align="left"><a href="/tongxun/index_jsp_catid_11_22.html"></a></td>
<td align="right"><img src="images/index_11.gif" width="10" height="38" /></td>
</tr>
</table>
</td>
</tr>
第一个tr,就是"通知公告"的头
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/index_10.gif">
<tr>
<td align="left"><img src="images/index_9.gif" width="121" height="38" /></td>
<td align="left"><a href="/tongxun/index_jsp_catid_11_22.html"></a></td>
<td align="right"><img src="images/index_11.gif" width="10" height="38" /></td>
</tr>
</table>
</td>
</tr>
ivanfanggz 2008-09-24
- 打赏
- 举报
给个思路就好了,各位大大不必浪费时间帮我做好的,谢谢~~!
ivanfanggz 2008-09-24
- 打赏
- 举报
当然,忘了说,我想完全用CSS+DIV的方式做,谢谢
