日期:2014-05-17  浏览次数:20627 次

如何让外框随着内容变长变短?
已经做好了网页的PSD整体样子,中间的一每个栏目是在一个个圆角的框框里,但是每个栏目的内容是动态变化的,有时候长点,有时候短点,用什么样的CSS可以让框随着内容变长或变短呢?

------解决方案--------------------
以下是兼容各种浏览器 外框随内容变长或变短 的写法
<div style="width:300px; height:auto !important; min-height:300px; height:300px; padding-bottom:10px; ">
很多内容
 <div style="clear:both;"></div>
</div>
------解决方案--------------------
1,css3圆角
2,9宫格
------解决方案--------------------
探讨

能有人说的详细点吗?外框是那种圆角的外框,我只会以前的那种做成背景放在表格里。

------解决方案--------------------
看在什么浏览器起 如果是在现代浏览器下 可以直接使用圆角CSS border-radius:5px;这种来设置
如果是在ie6这种 CSS是没法实现的 这个是要切图配合的。。
你要达到延伸的效果 切图时就要切3段。。不知道你说的是上下延伸还是左右 以左右为例。
第一部分切掉左边上面圆角到下面圆角这一段
第二部分中间切一条平铺的tup
第三部分切掉右边上面圆角到下面圆角部分
布局如下
HTML code

<div clss="我是一整个内容">
    <div class="我只显示左边的圆角边框" style="background:url no-repeat top left"></div>
    <div class="我的背景是中间平铺的1px就好" style="background:url repeat-x top left">
    我是这个网页的内容
    </div>
    <div class="我只显示右边的圆角边框" style="background:url no-repeat top left"></div>
</div>

------解决方案--------------------
探讨

看在什么浏览器起 如果是在现代浏览器下 可以直接使用圆角CSS border-radius:5px;这种来设置
如果是在ie6这种 CSS是没法实现的 这个是要切图配合的。。
你要达到延伸的效果 切图时就要切3段。。不知道你说的是上下延伸还是左右 以左右为例。
第一部分切掉左边上面圆角到下面圆角这一段
第二部分中间切一条平铺的tup
第三部分切掉右边上面圆角到下面圆角部分
布局如下……

------解决方案--------------------
哈哈,引用:

看在什么浏览器起 如果是在现代浏览器下 可以直接使用圆角CSS border-radius:5px;这种来设置
如果是在ie6这种 CSS是没法实现的 这个是要切图配合的。。
你要达到延伸的效果 切图时就要切3段。。不知道你说的是上下延伸还是左右 以左右为例。
第一部分切掉左边上面圆角到下面圆角这一段
第二部分中间切一条平铺的tup
第三部分切掉右边上面圆角到下面圆角部分
布局如下……


补充两边显示的div要写宽度 我觉得一般貌似不会超过5px土要切得精准 不然到时看起来就会有短截
中间不用写。div都要float:left。。

------解决方案--------------------
min-height:50px; height:auto !important; height:50px;