首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

关于用div布局!

2013-06-25 
关于用div布局求助!!!!!!!!!!!!!!!!!!%@ page languagejava importjava.util.* pageEncodingutf-

关于用div布局求助!!!!!!!!!!!!!!!!!!
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>个人消费管理系统</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
body{
margin: 0px;
padding: 0px;
background-image: url("./Images/background.png");
}
     div{
border: 3px solid black;
}
.div_logo{
margin-top:2px;
width: 100%;
}
.div_dh{
margin-top: 2px;
}
 #div_buttom div_left_dh,div_iframe{
float: left;
width: 100%;
}   
.div_left_dh{
 /* margin-right:90%;  */
    width:120px;
text-align: center;
height: 100%;              
padding-top: 2%;
}
.div_addxf{
margin-bottom: 20%;
}
.div_xfgl{
margin-bottom: 20%;
}
.div_lxwm{
margin-bottom:20%;
}
#div_iframe{
     margin-left: 130px;
     width: 100%;
     padding: 0px;
}
span{
border: 1px solid red;
}
.span_logo{
    border: 0px solid; red;
text-align:center;
margin-left: 40%;
}
.span_logoname{
    border: 0px solid; red;
text-align:center;
margin-left: 40%;
    color: red;
    font-size:25px;
}
.span_xt,.span_grzl,.span_grzl,.span_gy,.span_bz{
margin-left: 15%;
}
  .span_iframe{
  padding: 0px;
  width: 100%;
  }

</style>

  </head>

  <body>
  <div class="body">
    <form action="?" method="post">
     <div class="div_logo">
    <span class="span_logo"><img src="./Images/logo.png"></span>
    <div class="div_logname">
    <span class="span_logoname">个人消费管理系统</span>
    </div>
    </div>
    
    <div class="div_dh">
    <span class="span_grzl">个人昵称(点击可以查看个人信息)</span>
    <span class="span_xt">系统设置</span>
    <span class="span_bz">帮助?</span>


    <span alt="关于用div布局!" /> div布局 HTML
[解决办法]
div是块级无素,每个div默认情况下都是会占一行的,所以你那样是不行的。可以参考http://www.w3school.com.cn/css/css_positioning_floating.asp
[解决办法]
你应该用几个大的div当作iframe布局,然后小div在大div你用float来排列,例如左右结构,就是两个大div,宽度2:8;就像iframe那样就可以了
[解决办法]
可以用css float浮动设置

引用:
div是块级无素,每个div默认情况下都是会占一行的,所以你那样是不行的。可以参考http://www.w3school.com.cn/css/css_positioning_floating.asp


浮动教程可以参考2L贴的网址

解决方法:
.div_left_dh
{
    float:left;
}

[解决办法]
在这个代码里
#div_iframe{
     margin-left: 130px;
     width: 100%;
     padding: 0px;
}

加入楼上的,float:left;
[解决办法]
浮动 左浮动 右浮动。 你给父层做浮动 是怎么浮动呢? 其实关于这个 你可以理解为 div_buttom  这是一个箱子的名字 ,箱子里面放了两个东西 一个叫 div_left_dh  一个叫 div_iframe 。这个箱子里面定义了一个规则。那就是 默认 箱子里的东西 只能层叠往上放 只有 你让其中的一个 做了浮动 之后才能跟另一个 同层共存。说的比较粗糙啊。
[解决办法]
引用:
Quote: 引用:

可以用css float浮动设置



Quote: 引用:

div是块级无素,每个div默认情况下都是会占一行的,所以你那样是不行的。可以参考http://www.w3school.com.cn/css/css_positioning_floating.asp


浮动教程可以参考2L贴的网址

解决方法:
.div_left_dh
{
    float:left;
}

还真行啊。
可是我不太明白, 我本来是div_buttom  包含div_left_dh和div_iframe2个div
我是打算在div_buttom里面做浮动,怎么就不行啊,为啥要在div_left_dh里做呢?


http://www.w3school.com.cn/css/pr_class_float.asp
楼主可以仔细看下float属性的说明

float属性是不继承的,除非指定float:inherit

你对div_buttom左浮动
不会影响子div(div_left_dh和div_iframe)浮动


[解决办法]
引用:
Quote: 引用:

Quote: 引用:

Quote: 引用:

可以用css float浮动设置

Quote: 引用:

div是块级无素,每个div默认情况下都是会占一行的,所以你那样是不行的。可以参考http://www.w3school.com.cn/css/css_positioning_floating.asp


浮动教程可以参考2L贴的网址

解决方法:
.div_left_dh
{
    float:left;
}

还真行啊。
可是我不太明白, 我本来是div_buttom  包含div_left_dh和div_iframe2个div
我是打算在div_buttom里面做浮动,怎么就不行啊,为啥要在div_left_dh里做呢?


http://www.w3school.com.cn/css/pr_class_float.asp
楼主可以仔细看下float属性的说明

float属性是不继承的,除非指定float:inherit

你对div_buttom左浮动
不会影响子div(div_left_dh和div_iframe)浮动


但是子div(div_left_dh和div_iframe)是在div_buttom里面的啊,感觉有点乱...


指定div_buttom 左浮动后,只是把div_buttom块左浮动
但因为float默认不继承
所有div_buttom块里的div_left_dh,div_iframe还是按照默认布局
也就是先div_left_dh块
后div_iframe块
显示效果是上下两块

热点排行