2

私は3つの列を作成しようとしています。左右の列にはボタンが含まれており、これらのボタンはコンテナの外側の境界線に対して固定された位置にある必要があります。中央の列には、asp:Table動的に作成され、1行1列から6行7列までのすべてが含まれます。

私は最終的にこのサイトになるこのCSSの例に従おうとしました：http： //www.alistapart.com/d/holygrail/example_3.html、そして私はdivsを並べて取得しました-しかし私はできます '左右の列を垂直に揃えるか、中央のdivタグと同じ高さにします。これは同じことだと思います。

それが重要かどうかはわかりませんが、私のdivはContentPlaceHolderASPのa内にありPageます。

これが私のコードです：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    //Container to the three columns
    <div id="calendarContainer"> 

        //The left button container
        <div id="navigateButtonLeft" class="calendarColumn">
            <asp:Button ID="btnLeftMonth" runat="server" Text="<" 
                        onclick="btnLeftMonth_Click" /> 
        </div>

        //The table/month-calendar container
        <div id="calendar"class="calendarColumn">
            <asp:Table ID="TableMonthCalendar" runat="server" GridLines="Both" />
        </div>

        //The right button container
        <div class="calendarColumn">
            <asp:Button ID="btnRightMonth" runat="server" Text=">" 
                        onclick="btnRightMonth_Click" />  
        </div>
    </div>
</asp:Content>

そして私のCSS（おそらく価値がない）：

#calendarContainer {
  overflow:hidden;
  border: 1px solid black;
}
#calendarContainer .calendarColumn {
  padding-bottom: 1001em;
  margin-bottom: -1000em;
  border: 1px solid black;
  overflow:hidden;
  float:left;
}
#navigateButtonLeft {

}
#calendar {
  width: 80%;
}
#navigateButtonRight {

}

以前はtableatrと3を使用してtdいましたが、希望どおりに使用できませんでした。

これが私が達成したいことの実例であり、おそらく私の説明よりも優れています。 設計目標

4

1 に答える 1

3

カレンダーをフォーマットする必要があり、列を絶対位置に配置してから、ふりをして、追加のコンテンツを追加するときにさらにレイアウトが崩れないようにする必要があります。

このフィドルの例を見てください!

このタイプのソリューションの詳細については、次を参照してください。

CSS 位置プロパティ | CSS-トリック - Fluid Width Equal Height Columns

ノート：

Fiddleでcss部分をチェックして、要素を適切な場所に配置するために何が行われているかを確認します。また、上と下を使用すると、要素をラッパーの上から下に移動できます。この場合、ラッパーは#calendarContainer.

編集:

「座標」のないメインラッパーを使用した2番目のフィドルの例。

再編集

通常のアイコンとしてスタイル設定されたボタンを使用した別のフィドルの例。

使用されるアイコン:

左矢印| 右矢印

上から下にボタンを使用して OP からの最後の要求を追加するように編集

ここでフィドル！

于 2012-05-09T11:34:54.887 に答える