页面布局无表设计答案

【问题标题】：Page Layout Table-less design页面布局无表设计
【发布时间】：2012-10-20 04:42:16
【问题描述】：

我正在尝试学习无桌子设计，但在本应简单的事情上遇到了困难

我试图在设计器的屏幕右下角创建一个保存或取消按钮，它看起来不错，但在浏览器（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>

【问题讨论】：

使用适合你的东西，不要无缘无故地忽略表格而不必要地增加标记，表格通常用于设计表单或报告布局，因此您可以使用表格，所以不要'不要弄乱你的标记并增加样式
Alien 先生的非常糟糕的建议。表格应仅用于数据展示。而已。肯定不会设计网页。你的buttons div 应该都清楚。
由于这是一个简单的数据输入表格，表格没有任何问题。但是，您可以将 div 用作单元格并显示：行内块并将它们嵌套在其他 div 中以创建行。这将为您提供比表格更大的灵活性
stackoverflow.com/questions/2164686/… - 没什么好说的了。
@Dementic 有资格作为表格数据的最小列/行数是多少？是 3x3 吗？ 3x2 或 2x2 怎么样？如果您搜索一组表格数据并且只得到一个结果，您是否将其显示在表格以外的其他地方？它是否因为只有 1 个结果而不再是表格数据？数据输入表单通常是表格数据集合的单个记录。说它不应该属于一个表是无稽之谈。

标签： html css tablelayout

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

您能解释一下为什么要添加overflow:hidden 吗？这样做的结果是什么？ jsfiddle 如果可能的话。
overflow: hidden 将创建一个新的盒子模型上下文，其效果是使带有浮动子元素的元素围绕该内容展开。
因为浮动元素是#main的子元素... overflow: hidden;正在清除这个......他在#main 中没有需要可见的元素。在这里你得到了 js-fiddle jsfiddle.net/3k3yd
是的，解决了浮动嵌套 div 与其容器高度相关的问题。
既然您回答了我的问题，它使您回答完整。您应该将其添加到您的答案中并使其完整。（然后我也可以投票给你）。教人钓鱼....

【解决方案3】：

添加

overflow: auto

到#main 定义。

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

这是a fiddle 的结果。

【讨论】：

【解决方案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

【讨论】：