求DIV+CSS右侧固定宽度300px左侧100%自适应解决模型

bingeng 2007-03-07 01:40:42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div style="width:100%; margin-right:-300px; padding:0; float:left; background-color:#CCCCCC">
<div style="margin-right:300px; padding:0;">
<div style="width:100%; background-color:#FFFF99">
<div style="width:50%; background-color:#3399FF; float:left;">
3_L
<div style="margin:5px 5px 5px 0; background-color:#FF9900;">3R_1</div>
</div>
<div style="width:50%; background-color:#3399FF; float:right;">
3_R
<div style="margin:5px 5px 5px 0; background-color:#FF9900;">3R_1_Title=4R</div>
<div style="margin:5px 5px 5px 0; background-color:#FF9900;">4R
<div style="padding:0 5px; background-color:#990099">5R内容</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:300px; float:right; background-color:#33CCFF">sideBar</div>
</body>
</html>
在这样写可以满足需求支持IE和FF但是div嵌套太多。问有没有好的解决方法。
...全文
1008 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
bingeng 2007-03-08
  • 打赏
  • 举报
 回复
为了 布满整个屏幕，这样的确不好设计。
zhaodongliu 2007-03-08
  • 打赏
  • 举报
 回复
我在想为什么左侧要自适应呢
没有大小限制？
zhaodongliu 2007-03-08
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>问题</title>
<style type="text/css">
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "宋体", arial; TEXT-ALIGN: center
}
DIV {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
.oodiv{
width:100%; height:800px;
}
.oodiv .leftdiv{
width:auto; float:right; height:800px;
}
.oodiv .rightdiv{
width:300px; float:right; height:800px;
}
</style>
</head>
<body>
<div class="oodiv">
<div class="rightdiv">fdsf</div>
<div class="leftdiv">fdsgfdgfdgfdgfdgfdgfdgfgfdgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfdfs</div>
</div>
</body>
</html>
zhaodongliu 2007-03-08
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>问题</title>
<style type="text/css">
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "宋体", arial; TEXT-ALIGN: center
}
DIV {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
.oodiv{
width:100%; height:800px;
}
.oodiv .leftdiv{
width:inherit; float:right; height:800px;
}
.oodiv .rightdiv{
width:300px; float:right; height:800px;
}
</style>
</head>
<body>
<div class="oodiv">
<div class="rightdiv">fdsf</div>
<div class="leftdiv">fdsgfdgfdgfdgfdgfdgfdgfgfdgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfgfdfs</div>
</div>
</body>
</html>
bingeng 2007-03-07
  • 打赏
  • 举报
 回复
storm0 要是在 在dyleft中在加2个均分列呢？
<div id="dyclear"><!--宽度为零，其实这才是左边，不过宽为0也就不算了--></div>
<div id="dyleft">
左栏宽度自适应
<div id="dyleft_L">占dyleft50%，最好能与dyleft_R留个空隙</div>
<div id="dyleft_R">占dyleft50%</div>
</div>
<div id="dyright">右栏固定200px</div>
johnsonljl 2007-03-07
  • 打赏
  • 举报
 回复
*{
margin:0;
padding:0;
}

#right{
width: 300px;
position: absolute;
top: 0px;
right: 0px;
background-color:#000;
height:200px;
}

#left{
margin-right: 300px;
background-color:#F00;
height:200px;
}


<div id="left"></div>
<div id="right"></div>
zhaodongliu 2007-03-07
  • 打赏
  • 举报
 回复
垃圾代码
飘零雾雨 2007-03-07
  • 打赏
  • 举报
 回复
里面的文字写反了^_^效果是没错的
飘零雾雨 2007-03-07
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css Layout</title>
<style type="text/css">
body {
font-family: Verdana, Arial;
margin: 0;
}
#dyclear {
float: left;
}
#dyleft {
background-color: #FFFFCC;
margin: 0 210px 0 0;
}
#dyright {
background-color: #FFFFCC;
float: right;
width: 200px;
}
div {
border: dotted 1px green;
}
</style>
</head>
<body>
<div id="dyclear"><!--宽度为零，其实这才是左边，不过宽为0也就不算了--></div>
<div id="dyright">左栏宽度自适应</div>
<div id="dyleft">右栏固定200px</div>
</body>
</html>
cvpc 2007-03-07
  • 打赏
  • 举报
 回复
如何实现左右两列一列自适应宽度http://www.csser.com/html/csser/webstandards/200703/04/1027.html
div+css布局中简单的样式
div+css布局中简单的样式，例如： 左右自适应布局 #left { background-color: #FFFF33; height:250px; width:25%; border:10px solid #000000; float:left; margin:10px; }
独行DIV自适应宽度布局CSS实例与应用范围
独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度，也就是单独一行宽度自适应DIV的布局。通过DIV CSS实例CSS自适应宽度布局方法，再过常见用处介绍充分掌握自适应独占一行一列的...
HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例
HTML实现2列布局，左侧宽度固定，右侧自适应 实现一： <style> body, html{padding:0; margin:0;} // 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-...
左侧固定宽度，右侧自适应宽度的CSS布局
设置content距离right的左侧为200px，即刚巧等于left的宽度。” 这个布局有一个缺点就是，如果我设置了foot的div，试了很多办法，都不能根据content的高度，连着中间的内容，自动置于HTML页面的底部。如有牛人知道...
DIV+CSS 三栏布局实例代码
1.要求：如上图中的，三栏目布局，中间的MAIN是自适应浏览器的宽度，左LEFT固定宽200PX，右RIGHT固定宽200PX; 复制代码代码如下: .right,.left{height:300px;width:200px;} .right{ float:right;background:#000000...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章