当前位置：首页 → 问答吧 → div+css好的来帮我改个布局吧急死啦

div+css好的来帮我改个布局吧急死啦

时间：2008-04-25

来源：互联网

<!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>
#left_top{
background-color:#EBDD9E;
border:2px solid #B5A068;
width:100px;
height:200px;
float:left;
}
#left_bottom{
background-color:#EBDD9E;
border:2px solid #B5A068;
width:100px;
height:300px;
top:200px;
left:100px
float:left;
}
#right{
background-color:#EBDD9E;
border:2px solid #B5A068;
width:300px;
height:500px;
}
</style>
</head>
<body>
<div id="layout">
<div id="left_top">left_top</div>
<div id="left_bottom">left_bottom</div>
<div id="right">right</div>
</div>
</body>
</html>

复制代码

大家一看应该就明白啦我想要这种效果的

left_top right
left_bottom
左右2列左边的2行谢谢啦！

作者: 379548695 发布时间: 2008-04-25

咋没人帮下啊

作者: 379548695 发布时间: 2008-04-25

都回家吃饭了。

不过我看了下，只有top right bottom，那左边呢？

不好意思，我也去吃饭了........

作者: 北极星发布时间: 2008-04-25

<div id="right" style="float:right;">right</div>
<div id="left_top">left_top</div>
<div id="left_bottom">left_bottom</div>

或者把左边框起来先
<div style="float:left">
<div id="left_top">left_top</div>
<div id="left_bottom">left_bottom</div>
</div>
<div id="right" style="float:right;">right</div>

作者: huanghuibin 发布时间: 2008-04-25

第一种，#right只能float:right/
第二种，#right的float:left/float:right.

叫的外卖还没到……

作者: huanghuibin 发布时间: 2008-04-25

我想要的是这种效果啊。不是那个星星你理解错啦

作者: 379548695 发布时间: 2008-04-25

<div id="layout">
<div style="float:left">
<div id="left_top">left_top</div>
<div id="left_bottom">left_bottom</div>
</div>
<div id="right" style="float:left">right</div>
</div>

那只能先把左边框起来了

作者: huanghuibin 发布时间: 2008-04-25

原帖由 huanghuibin 于 2008-4-25 19:00 发表
第一种，#right只能float:right/
第二种，#right的float:left/float:right.

叫的外卖还没到……

你这几个我4啦都出不来我要的效果啊哥们！

作者: 379548695 发布时间: 2008-04-25

你自己44没我要的效果啊哥们们

作者: 379548695 发布时间: 2008-04-25

<div id="layout">
<div style="float:left;width:100px">
<div id="left_top">left_top</div>
<div id="left_bottom">left_bottom</div>
</div>
<div id="right" style="float:left">right</div>
</div>

忘记设个宽度了

作者: huanghuibin 发布时间: 2008-04-25

那你说怎么搞个自适应的。？

作者: 379548695 发布时间: 2008-04-25

我也给一个简单的方法吧，左右分开。具体做法：再定义一个left,把left_top和left_bottom包含到left里去，就好了。代码见如下：（红色部分是新加的）

<!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>
#left{width:100px;height:550px;float:left;}
#left_top{
background-color:#EBDD9E;
border:2px solid #B5A068;
width:100px;
height:200px;
margin-bottom:2px;
}
#left_bottom{
background-color:#EBDD9E;
border:2px solid #B5A068;
width:100px;
height:300px;
}
#right{
background-color:#EBDD9E;
border:2px solid #B5A068;
width:300px;
height:510px;
}
</style>
</head>
<body>
<div id="layout">
  <div id="left">
<div id="left_top">left_top</div>
<div id="left_bottom">left_bottom</div>
  </div>
  <div id="right">right</div>
</div>
</body>
</html>

作者: cacuco 发布时间: 2008-05-06

好东西顶

作者: maker_wf 发布时间: 2008-05-07

div+css好的来帮我改个布局吧急死啦

热门阅读

热门下载