当前位置:编程学习 > C#/ASP.NET >>

一个布局的问题 (div)


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>无标题页</title>
    <style type="text/css">
    div{
        font-size: 15pt; font-family:宋体 ;
    
    }
    .isBottomBorder{ border:0px; Border-Bottom:1px solid black;}
    .leftMargin{ Margin-left:190px;}
    .zhengwenSize{font-size: 12pt;font-family: 宋体;}
  </style>

</head>
<body style="margin: 0px; text-align: center;">
    <form id="form1" runat="server">
        <div>
                
            <div id="1" style="margin-bottom: 140px;">
                <div style="margin-bottom: 30px; font-size: 22pt; font-family: 黑体;">
                    <b>建设工程施工劳务分包合同</b></div>
                <div>
                    <b>(<span style="margin-right: 60px;"></span>本)</b></div>
            </div>
            
           <div id="2" style="float:left; text-align:left; border:1px solid Blue; " class="leftMargin">
               <p >工程承包人(施工总承包人或专业工程承(分)包人):</p>
               <p style=" text-align:left; padding-left:130px;">
                   <asp:TextBox ID="TextBox4" runat="server" Width="450" CssClass="isBottomBorder"></asp:TextBox></p>
               <p style="margin-bottom:50px;">劳务分包人: <asp:TextBox ID="TextBox5" runat="server" CssClass="isBottomBorder" Width="450"></asp:TextBox></p>
               
           </div>
           
           <div id="3" style=" clear:left; border:1px solid green ; " class="leftMargin">
               <p style="text-indent:2em; width:550px;" class="zhengwenSize">依照《中华人民共和国合同法》、《中华人民共和国建筑法》及其它有关法律、法规,遵循平等、自愿、公平和诚实信用的原则,鉴于<asp:TextBox ID="TextBox6"
                           runat="server"></asp:TextBox>(以下简称为“发包人”)与工程承包人已经签订施工总承包合同或专业承(分)包合同(以下称为“总(分)包合同”),双方就劳务分包事项协商达成一致,订立本合同。</p>
           </div>
           <div style="border:1px solid red;" id="4"><p >asdfasdf</p></div>
           
        </div>
    </form>
</body>
</html>
问题 :蓝色框(div id=2)与绿色框中间为什么会存在间隔?绿色框与红色框之间又为什么会有间隔
经过测试,设置了 id=1的div的margin-bottom: 140px;这个是第一个div与第二个div(id=2)之间的距离,而这个间隔距离也影响了id=2和id=3之间的距离,问题发现了但没找出解决办法,
而id=3和id=4的div之间的距离不知道是什么原因造成的,高手解答

--------------------编程问答-------------------- float:left 造成了 蓝,绿之间的距离
绿红之间的距离是正常的段间距 --------------------编程问答-------------------- 学习 --------------------编程问答-------------------- 楼主帮你改好了`去掉div=2这个盒子的左浮动,去掉div=3这个盒子清除浮动
建议楼主在div+css时候慎重使用浮动float --------------------编程问答--------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>无标题页</title>
    <style type="text/css">
    div{
        font-size: 15pt; font-family:宋体 ;
    
    }
    .isBottomBorder{ border:0px; Border-Bottom:1px solid black;}
    .leftMargin{ Margin-left:190px;}
    .zhengwenSize{font-size: 12pt;font-family: 宋体;}
  </style>

</head>
<body style="margin: 0px; text-align: center;">
    <form id="form1" runat="server">
        <div>
                
            <div id="1" style="margin-bottom: 140px;">
                <div style="margin-bottom: 30px; font-size: 22pt; font-family: 黑体;">
                    <b>建设工程施工劳务分包合同</b></div>
                <div>
                    <b>(<span style="margin-right: 60px;"></span>本)</b></div>
            </div>
            
           <div id="2" style=" text-align:left; border:1px solid Blue; " class="leftMargin">
               <p >工程承包人(施工总承包人或专业工程承(分)包人):</p>
               <p style=" text-align:left; padding-left:130px;">
                   <asp:TextBox ID="TextBox4" runat="server" Width="450" CssClass="isBottomBorder"></asp:TextBox></p>
               <p style="margin-bottom:50px;">劳务分包人: <asp:TextBox ID="TextBox5" runat="server" CssClass="isBottomBorder" Width="450"></asp:TextBox></p>
               
           </div>
           
           <div id="3" style=" border:1px solid green ; " class="leftMargin">
               <p style="text-indent:2em; width:550px;" class="zhengwenSize">依照《中华人民共和国合同法》、《中华人民共和国建筑法》及其它有关法律、法规,遵循平等、自愿、公平和诚实信用的原则,鉴于<asp:TextBox ID="TextBox6"
                           runat="server"></asp:TextBox>(以下简称为“发包人”)与工程承包人已经签订施工总承包合同或专业承(分)包合同(以下称为“总(分)包合同”),双方就劳务分包事项协商达成一致,订立本合同。</p>
           </div>
           <div style="border:1px solid red;" id="4"><p >asdfasdf</p></div>
           
        </div>
    </form>
</body>
</html>

--------------------编程问答-------------------- 这样虽然2与3之间的距离没有了,但3你位置不能够保正,只所以设3的左浮动就是为了横向的位置 --------------------编程问答-------------------- 与需求不附,(前提是保证网页的布局不变) --------------------编程问答-------------------- 帮顶,顺便发下我的问题

http://topic.csdn.net/u/20090826/16/746d1082-d020-4a08-9800-314d63b9a436.html --------------------编程问答-------------------- 楼主要什么样的效果吧?。。。。。 --------------------编程问答-------------------- 回贴! --------------------编程问答-------------------- 与原网页布局相同,但要去掉id=2的div与div=3之间的距离 --------------------编程问答-------------------- 4楼的改的代码把id=3的左右的距离打破了,可以看到div id=3的div的内容向右移动了很多,这不是想要的效果
补充:.NET技术 ,  ASP.NET
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,