Question

我正在努力学习无桌面设计，并且难以安排一些应该很容易的事情

我正试图在设计师的屏幕右下角创建一个保存或取消按钮，但是在浏览器（IE和Chrome）中按钮移动到表单的右侧部分

Top Is Design Mode Bottom Is Browser

我已经尝试过高度自动并将它们全部放在一起。如果我固定主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>

Answer 1

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

Answer 2

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

Answer 3

添加

overflow: auto

到#main定义。

这解决了其他人所说的内容而无需额外的标记（即添加空div）

这是a fiddle的结果。

Answer 4

当您在容器中浮动两个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

页面布局无表格设计

4 个答案: