使用CSS的resize属性实现左右拖拽改变布局大小

html-css026

使用CSS的resize属性实现左右拖拽改变布局大小,第1张

resize属性的具体用法可见MDN： https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize

实现左右拖拽改变大小时：

HTML

此时的div会出现滚动边框，此时可拖拽的区域只有右下角的一小块。

此时需要将这个区域扩大可进行如下设置。

此时内部文字就被隐藏了，在实际使用时可以通过设置兄弟元素展示文字。

HTML:

CSS

效果链接： http://js.jirengu.com/voleracixe/2/edit

楼上的不懂就不要乱讲，iframe 不适合网站优化，因为frame里的内容百度谷歌等搜索引擎根本抓取不到；此外div可以设置高度和宽度。解决办法是：左右分栏，显然是一个div在左侧，一个div在右侧。左侧的div的css样式是：float：leftwidth70%右侧的div的css样式是：margin-left70%width:30%其他的你自己细微调一下。在这两个div下面，加上一个div清除左右侧浮动元素，比如，<div style="clear:both"></div>.就行了。

兄弟,div实现不了100%高度,最多只能自适应高度.你还是在iframe上定高度吧

=============================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>左右分栏</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<meta content="MSHTML 6.00.2900.2180" name="GENERATOR">

<script language="JavaScript">

//左右

function switchSysBarl(){

var imgsrc

imgsrc=document.all("makeleft").src

document.all("makeleft").src="img/menu_open.gif"

document.all("makeleft").title="显示左边的菜单"

parent.document.all("bbs_left").style.display="none"

}

else{

document.all("makeleft").src="img/menu_close.gif"

document.all("makeleft").title="隐藏左边的菜单"

parent.document.all("bbs_left").style.display=""

}

}

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body bottommargin="0" leftmargin="0" topmargin="0" scroll="no" rightmargin="0">

<div style="z-index: 2visibility: inheritwidth: autoheight: autofloat: left"

frameborder="0" scrolling="no" target="main">

<iframe name="bbs_left" style="z-index: 2visibility: inheritwidth: 180pxheight: 100%"

src="left.htm" frameborder="0" scrolling="no" target="main"></iframe>

</div>

<div style="background-color: #005fbdwidth: 10pxfloat: leftheight: 800pxcursor: hand

padding: 300px 0px 0px 0px" id="menuSwitch" onclick="switchSysBarl()">

<img src="img/menu_close.gif" name="makeleft" width="10" height="10" border="0" id="makeleft" /></div>

<div style="float: leftwidth: auto">

<iframe name="bbs_main" style="z-index: 1visibility: inheritwidth: 100%height: 100%" src="right.htm"

frameborder="0" scrolling="yes"></iframe>

</div>

</body>

</html>