1

我正在尝试学习无桌子设计，并且在一些应该很容易的事情上遇到了困难

我正在尝试在设计器的屏幕右下角创建一个保存或取消按钮，它看起来不错，但在浏览器（IE 和 Chrome）中，按钮移动到表单的右侧

顶部是设计模式底部是浏览器

我已经尝试过高度自动并将其全部排除在外。如果我修复了主 div 的高度，那么它可以工作，但我并不总是知道那个高度。无论如何让按钮在主 div 的底部“流动”？

谢谢你

编码

    <%@ Page Title="" Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="NewAccount.aspx.cs" Inherits="BudgetApplicationCSharp.NewAccount" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <style type="text/css" media="screen">
      #container
      {
          width:500px;
          margin: 5px;           
      }
      #main 
      {
          width:500px;
          height:auto;
          margin:1px;  
      }
      #left 
      {
          float:left;
          width:50%;
          padding-left:0px;
          margin:0px;

      }
      #right
      {
          float:right;
          width:50%
      }
      ol 
      {
          list-style:none;
      }
      input[type=button]
      {
          float:right;
          clear:right;
      }
       input[type=Text]
      {
           font:15px "MS Sans Serif";
      }
      label 
      {
          font:15px "MS Sans Serif";

      }
      fieldset 
      {
          padding:0px;
          margin:0px;
          border:0px none;
      }
      ol 
      {
          padding:0px;
          margin:0px;
          border:0px none;
      }
  </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="container">
    <div id="main">
        <div id="left">
            <fieldset>
                <ol>
                    <li>
                        <label for="AccountName">
                            Account Name</label>
                        <input id="AccountName" runat="server" />
                    </li>
                    <li>
                        <label for="Description">
                            Description</label>
                        <input id="Description" runat="server" />
                    </li>
                    <li>
                        <label for="InstituteName">
                            Institute Name</label>
                        <input id="InstituteName" runat="server" />
                    </li>
                    <li>
                        <label for="AccountType">
                            Institute Name</label>
                        <select id="cboAccountType" runat="server">
                        </select>
                    </li>
                </ol>
            </fieldset>
        </div>
        <div id="right">
            <fieldset>
                <ol>
                    <li>
                        <label for="AccountNumber">
                            Account Number</label>
                        <input id="AccountNumber" runat="server" />
                    </li>
                    <li>
                        <label for="RoutingNumber">
                            Routing Number</label>
                        <input id="RoutingNumber" runat="server" />
                    </li>                       
                </ol>
            </fieldset>
        </div>
    </div>
    <div id="buttons">
    <input id="btnSave" type="button" value="Save" runat="server" />
    <input id="btnCancel" type="button" value="Cancel" runat="server" />
    </div>
</div>
</asp:Content>
4

4 回答 4

4

这是一个浮动问题。你需要某种“clearfix”。在你的情况下，我会添加一个overflow:hidden;到#main ...这将创建一个新的盒子模型上下文，这将解决你的问题。在这里你有一个 jsfiddle 来演示这种行为（只需删除溢出：隐藏在那里查看差异）-> http://jsfiddle.net/3k3yd/

于 2012-10-30T18:59:11.173 回答
4

添加样式规则#buttons { clear: both; }应该导致按钮 div 低于浮动 div。

于 2012-10-30T18:59:51.150 回答
2

添加

overflow: auto

到#main定义。

这解决了其他人所说的，而不需要额外的标记（即添加一个空的 div）

这是一个结果。

于 2012-10-30T19:07:10.520 回答
0

当您在容器中浮动两个 div 时，您遇到了跨浏览器常见的问题。问题是容器的高度没有扩展到其中浮动 div 的高度。此问题的修复通常称为 clearfix。

在此示例中，我已将 clearfix 应用于您的标记：http: //jsfiddle.net/3D7hz/

它将这种样式添加到您的样式表中：

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

并将 clearfix 类添加到标记中的主要元素：

 <div id="main" class="clearfix">

此链接详细描述了 clearfix 问题： http ://www.positioniseverything.net/easyclearing.html

于 2012-10-30T19:05:03.577 回答