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

これはフローティングの問題です。ある種の「クリアフィックス」が必要です。あなたの場合、私は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

コンテナ内で2つの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 に答える