DIV+css 如何实现左右分栏

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DIV+css 如何实现左右分栏相关的知识,希望对你有一定的参考价值。

弄DIV+CSS 只能一个栏目顶到上一个栏目 下面,怎么能实现左右分栏的布局呢.

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

div/css 如何实现左右分栏,左侧菜单能展开/隐藏

类似下面这个table布局的效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><title>左右分栏</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<SCRIPT language=JavaScript>
//左右
function switchSysBarl()
var imgsrc;
imgsrc=document.all("makeleft").src;
if (imgsrc.indexOf("menu_close")>1)
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>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width=0 height="100%"><IFRAME
style="Z-INDEX: 2; VISIBILITY: inherit; WIDTH: 180px; HEIGHT: 100%"
name=bbs_left src="left.htm" frameBorder=0
scrolling=no target="main"></IFRAME></TD>
<td bgcolor="#005fbd" width="10" id=menuSwitch style="CURSOR: hand" onclick=switchSysBarl()><img src="img/menu_close.gif" name="makeleft" width="10" height="10" border="0" id="makeleft" /></td>
<TD vAlign=top width="100%" height="100%"><IFRAME
style="Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
name=bbs_main src="right.htm" frameBorder=0
scrolling=yes></IFRAME></TD></TR></TBODY></TABLE></BODY></HTML>
恩,不错,谢谢呀,当初只是这个界面就花了不少时间,
还有两个问题,一是左侧菜单不能隐藏/展开,同时右侧随着满屏/分栏;二是,分栏后的左右两侧高度都不是100%;
再等等,高手指教,感激不尽

兄弟,div实现不了100%高度,最多只能自适应高度.你还是在iframe上定高度吧
=============================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>左右分栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=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: 2; visibility: inherit; width: auto; height: auto; float: left;"
frameborder="0" scrolling="no" target="main">
<iframe name="bbs_left" style="z-index: 2; visibility: inherit; width: 180px; height: 100%"
src="left.htm" frameborder="0" scrolling="no" target="main"></iframe>
</div>
<div style="background-color: #005fbd; width: 10px; float: left; height: 800px; cursor: 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: left; width: auto;">
<iframe name="bbs_main" style="z-index: 1; visibility: inherit; width: 100%; height: 100%" src="right.htm"
frameborder="0" scrolling="yes"></iframe>
</div>
</body>
</html>
参考技术A 用浮动,关于隐藏就必须的用js特效 参考技术B 这个 最好 用 table 或者给 div 用table的 格式 div 是不能自动扩充的。
例table:
《table》
《tr》
《td》

《div》第一个《/div》

《/td》
《td》

《div》第二个《/div》
《/td》
《/tr》

《/table》
这样把第一个 td 隐藏了,第二个td 会 自动扩充。

div 的
css
<style>
html, body
margin: 0;
height: 100%;

.main
background:#ccc;
width: 100%;
height: 100%;
margin: auto;

min-width: 1000px;

.top_nav
background:#ff0;
width: 100%;
height: 5%;
min-height: 30px;

.content
background:blue;
width: 100%;
height: 90%;
display: table;

.toolbar
background:red;
width: 10%;
height: 100%;
display: table-cell;

.main_container

display: table-cell;
width: 90%;
height: 100%;

.ddd
float: right;
height: 100%;
width: 220px;


.foot
background:#900;
width: 100%;
height: 5%;
display: table;

</style>
html:
<div class="main">
<div class="top_nav">
</div>
<div class="content">
<div class="toolbar" > // 把他 隐藏 后边的 会自动 扩充
<div class="ddd"></div>
</div>

<div class="main_container"></div>
</div>
<div class="foot"></div>
</div>
参考技术C 你可以尝试一下display:flex 参考技术D jquery可以写的,奈何这里无法加入文件,我没法给你展示实例

以上是关于DIV+css 如何实现左右分栏的主要内容,如果未能解决你的问题,请参考以下文章

用CSS+DIV实现四列式分栏

css 实现页面区域分栏左右拉伸调整布局

css 实现页面区域分栏左右拉伸调整布局

css 实现页面区域分栏左右拉伸调整布局

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

DIV+CSS 如何让左右两个DIV的高度一致?