DIV+CSS布局,怎么实现两列高度会一致,其中左例随内容长度而定。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DIV+CSS布局,怎么实现两列高度会一致,其中左例随内容长度而定。相关的知识,希望对你有一定的参考价值。

怎么实现两列高度会一致,其中左例随内容长度而定。

类似效果如下列网页网址所示:
http://hunan.news.163.com/08/0731/19/4I73V9MN0055007L.html

参考技术A 在css文件中
左列高度设为height:100%
右列高度设为100%
还应该有个包含左列和右列的主div,也设高为100%
参考技术B 用背景图弥补 在wrap里设置背景图,让左侧和右侧看起来都在自适应增加
<div id="wrap">
<div>左侧</div>
<div>右侧</div>
</div>
参考技术C =.=大哥。你好有趣。CSS目前估计是无法实现你这个功能。
用背景图片来实现吧。
参考技术D 用背景图片

css+div布局,左右两个div怎么能自动适应高度

用div+css布局时,我想做一个左右结构的,怎么写能让左边div的高度和右边div的高度自动调整为成为相同的高度吗?
<div>左边</div><div>右</div>
<div style="float:left">左</div><div>右</div>左右结构的高度自适应

可以通过js实现两个div自适应同等高度,如下:
先设置div+css 基本布局:
<div id="mm">
<div id="mm1">左边</div>
<div id="mm2">右边</div>
</div>
js 实现 div 自适应高度
代码如下:
<script type="text/javascript">
<!--
window.onload=window.onresize=funct
if document.getElementByIdx_x "mm2" .clientHeight<document.getElementByIdx_x "mm1" .clientHeight
document.getElementByIdx_x "mm2" .style.height=document.getElementByIdx_x "mm1" .offsetHeight+"px";

else
document.getElementByIdx_x "mm1" .style.height=document.getElementByIdx_x "mm2" .offsetHeight+"px";


-->
</script>
参考技术A 用程序解决很容易,高度用一个变量就行,左边多少右边就多少,至于用什么程序就看网站是用什么程序的了,用Javascript脚本程序应该能实现. 参考技术B 外面再套一层div,内层div高度100%。要不就考虑用js实现 参考技术C 我试过的,基本上时做不了的状态,用JS是可以实现,但是这样会影响那些关了JS的用户的体验。父层自适应子层还是可以实现的,两个等高的话,确实是。。。
建议你还是想别的方法来达成相同的效果吧。(我就是这么做的。。。曾经我试过把设置height属性,先把body的height属性设为100%,再设置其他的height,后来发现height:100%;只是固定的屏幕高度,而不是你的文档的高度)
(三楼那个显然不行嘛。。。你clear一下,也只是不让后面的元素受浮动影响罢了...)本回答被提问者采纳
参考技术D <div style="width:50%;float:left;height:200px;">左边</div><div style="width:50%;float:left;height:200px;">>右</div>
按你的要求的话,只能用表格了~~要么用JS,或是修改布局.

以上是关于DIV+CSS布局,怎么实现两列高度会一致,其中左例随内容长度而定。的主要内容,如果未能解决你的问题,请参考以下文章

div+css三行两列布局怎么写,求大神解答

CSS+div三行两列布局

CSS+DIV怎么实现网页左右两栏高度一致?

div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做

css怎么实现连个div的高度一样

CSS两列布局的多种方式