+ -
当前位置:首页 → 问答吧 → DIV布局的问题 ,各位帮忙看看

DIV布局的问题 ,各位帮忙看看

时间:2011-04-20

来源:互联网

CSS code

.groupCenter
{
    margin:0px;
     margin-top:3px;/*加上这行DIV就错行了*/
    padding-top:3px;
     padding-right:10px;
      ZOOM: 1; 
      BACKGROUND-COLOR: #f3faff; 
      OVERFLOW: hidden; 
      BORDER: #b9e1fc 1px solid; 
          border-right-width:0px;
     float:left;
     height:35px;
     vertical-align:middle;
     text-align:right;
     border-left-width:0px;
      
}
.groupRight
{
    margin:0px;
margin-top:3px;/*加上这行DIV就错行了*/
    margin-left:5px;
    BORDER: #b9e1fc 1px solid;
    border-left-width:0px;
      ZOOM: 1; 
      BACKGROUND-COLOR: #f3faff; 
      OVERFLOW: hidden; 
      padding-top:3px;
      padding-left:25px;
     text-align:left;
      height:35px;
      vertical-align:middle;
      color:#8E8989;
}
.groupLeft
{
    margin:0px;
margin-top:3px;/*加上这行DIV就错行了*/
    BORDER: #b9e1fc 1px solid;
      ZOOM: 1; 
      BACKGROUND-COLOR: #f3faff; 
      OVERFLOW: hidden; 
        padding-top:3px;
      float:left;
      width:200px;
      text-align:right;
      vertical-align:middle;
      height:35px;
      font-weight:bold;
      border-right-width:0px;
}


HTML code

            <!--基金项目编号-->
            <div class="groupLeft">
                项目编号:
            </div>
            <div class="groupCenter">
                <asp:TextBox ID="txtObjNO" runat="server" CssClass="InputCss"></asp:TextBox>
            </div>
            <div class="groupRight" id="divNo">
            </div>
  

        
 
        <!--基金项目名称-->
        <div class="groupLeft">
            项目名称:
        </div>
        <div class="groupCenter">
            <asp:TextBox ID="txtObjName" runat="server" CssClass="InputCss" Width="339px"></asp:TextBox>
        </div>
        <div class="groupRight" id="divName">

        </div>

        <!--项目承担单位-->
        <div class="groupLeft">
            承担单位:
        </div>
        <div class="groupCenter">
            <asp:TextBox ID="txtObjCDUnit" runat="server" CssClass="InputCss" Width="212px"></asp:TextBox>
        </div>
        <div class="groupRight" id="divCDUnit">
        </div>


作者: yidongliange4   发布时间: 2011-04-20

最外层大容器的宽度是有限的,你增加了MARGIN-LEFT,就使内容宽度超出了大容器的宽度,因此错行。
重新调整一下里面各元素的宽度,让他们的宽度和MARGIN-LEFT的尺寸加在一起不超出外层大容器宽度就可以了。

作者: theforever   发布时间: 2011-04-20

padding 或者 margin 之间是不是有重复

作者: fengyarongaa   发布时间: 2011-04-20

热门下载

更多