Question

我不会做太多的HTML。但我需要像WinForms一样以精确的方式布局表单。无论如何，这是我最好的尝试使用我知道的小CSS和HTML：

enter image description here

问题是，白色区域内的所有内容都是绝对放弃的...因此，每次添加新内容时，我都必须调整所有周围的元素。另外，当我从ASP.NET代码填充复选框列表内容时，我并不总是知道会有多少项，所以白框有时太短...所以我通过手动修复CSS中的新高度来解决这个问题......你知道的坏方法。

请告诉我应该如何这样做？

CSS：

body
{
    margin: 0px;
    font-family: sans-serif;
    font-size: 13px;
    color: #111;
    background: #c4c4c4 url("bgd.jpg");
}

#header
{
    height: 80px;
    background-color: #333;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3);
}

#wrapper
{
    padding: 20px 20px 20px 20px;
    height: auto;
}

#footer
{
    height: 40px;
    background-color: #333;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3);
}

#copyright
{
    font-size: smaller;
    position: relative;
    top: 13px;
    color: #eee;
    text-shadow: 1px 1px #666;
    text-align: center;
}

.block
{
    margin: 0 auto;
    width: 440px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 3px 3px 3px #888888;
}

.block > *
{
    position: relative;
}

#login
{
    width: 215px;
    height: 170px;
}

#login h2
{
    background: #353;
}

#controlpanel
{
    width: 235px;
    height: 175px;
}

#controlpanel h2
{
    background: rgb(165,0,0);
}

#options
{
    width: 273px;
    height:auto;
}

#options h2
{
    background: royalblue;
}

.block h2
{
    padding: 10px 15px;
    color: white;
    background: #261F1F;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

h1, h2, h3
{
    color: #111111;
    margin: 0px;
}

h1
{
    color: white;
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 40px;
}

h2
{
    font-size: 22px;
}

a:link, a:visited, a:hover, a:active
{
}

a
{
    -moz-outline: none;
}

hr
{
    background: #dddddd;
    color: #dddddd;
}

.button
{
    font-weight: bold;
    font-size: 11px;
    height: 27px;
    color: #111111;
    padding: 2px 5px;
    background: url('btnbgd.png') top;
    border: 1px solid #C3C4BA;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.textbox
{
    height: 25px;
    padding: 0px 3px 0px 3px;
    margin: 0;
    border: 1px solid #DDD;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.label
{
    text-shadow: 2px 2px 2px #eee;
}

select 
{
    border: 1px solid #C3C4BA;
    border-radius: 3px;
    height: 25px;
}

.groupbox
{
    text-shadow: 2px 2px 2px #eee;
    left: 12px;
    width: 250px;
}

fieldset 
{
    border-radius: 3px;
}

.groupbox legend
{
    text-shadow: none;
    padding: 2px 4px 2px 4px;
    color: white;
    background-color: #C3C4BA; 
    border-radius: 3px;
}

#MainContentPlaceHolder_pnlXRefs legend
{
    text-shadow: none;
    padding: 2px 4px 2px 4px;
    color: white;
    background-color: red; 
    border-radius: 3px;
}

.footer
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    background-color: #575654;
}

HTML：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Options.aspx.cs" Inherits="Portal.Options"
    MasterPageFile="Portal.Master" Title="Price File Options" %>

<asp:Content runat="server" ContentPlaceHolderID="MainContentPlaceHolder">
    <div class="block" id="options">
        <h2>
            Options</h2>
        <asp:Label runat="server" Text="Acc No :" Style="top: 15px; left: 15px;" CssClass="label" />
        <asp:TextBox ID="txtAccNo" runat="server" Style="top: 15px; left: 15px; width: 110px"
            CssClass="textbox" />
        <asp:Button ID="btnGetColours" Style="top: 15px; left: 15px" CssClass="button" runat="server"
            Text="Refresh" onclick="btnGetColours_Click" />
        <asp:Panel ID="pnlBrembo" runat="server" GroupingText="BREMBO" Style="top: 25px;"
            CssClass="groupbox">
            <asp:CheckBoxList ID="lstBrembo" runat="server" />
        </asp:Panel>



        <asp:Label ID="Label1" runat="server" Text="Email :" Style="top: 85px; left: 15px;" CssClass="label" />
        <asp:TextBox ID="txtEmail" runat="server" Style="top: 85px; left: 24px; width: 185px"
            Text="a@b.com" CssClass="textbox" />

        </br>
        <asp:Button ID="btnGenerate" Style="top: 100px; left: 12px" CssClass="button" runat="server"
            Text="Generate & Send" OnClick="btnGenerate_Click" />
    </div>
</asp:Content>

更新1：

取高度后：2000px; out，甚至将它更改为自动为白盒子我在底部推出一些控件从白框中推出：

enter image description here

Answer 1

将height:auto添加到内部块div。

<强> DEMO

您可以通过删除/添加上述演示/

中的列表项来检查高度变化

Answer 2

默认情况下，复选框显示为内联（表示并排） - 您需要明确设置display: block;。

为此，我将每个复选框字段包装在自己的div中，然后设置样式以使其显示为块。

以下是一个有效的例子：http://jsfiddle.net/alexpls/Yr87Z/

以下是有关CSS display属性的一些信息：http://www.w3schools.com/cssref/pr_class_display.asp

Answer 3

您需要重新设计和使用浮动，当页面上的项目数量不是静态时，它们更容易控制。

我做了一个jsFiddle，表明你可以做什么。根据需要复制并粘贴#item div多次，定位应该没问题

如何整齐地布局HTML

3 个答案: