在ASP.NET中的ContentPlaceHolder中并排放置具有相等列高的Div

Question

我想要三列。左列和右列包含一个按钮，这些按钮应保持与容器外边界的固定对齐。中心列包含一个asp:Table，它是动态创建的，包含从1行到1列到6行7列的所有内容。

我试图关注最终成为此网站的this CSS example：http://www.alistapart.com/d/holygrail/example_3.html，我已经让div并排 - 但我无法获得左右列垂直对齐或与中心div标签具有相同的高度，我猜是同样的事情。

我不知道这是否重要，但我的div位于ASP ContentPlaceHolder的{​​{1}}内。

这是我的代码：

Page

和我的CSS（可能毫无价值）：

<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>

我之前使用#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 { } table和tr，但我无法按照我想要的方式使用它。

以下是我想要实现的内容的说明，这可能比我的解释更好：

Answer 1

您需要格式化日历并将具有绝对位置的列放置在您假装的位置，并避免在添加其他内容时进一步打开布局：

请参阅此Fiddle example!

详细了解此类解决方案：

CSS Position Property | CSS-Tricks - Fluid Width Equal Height Columns

备注：

在Fiddle上，查看 css 部分，了解将元素定位到正确的位置。此外，使用顶部和底部允许元素从其包装器的顶部到底部，在您的情况下，包装器为#calendarContainer。

---

<强>编辑：

第二个Fiddle Example，主包装没有“坐标”。

---

再次编辑

另一个Fiddle Example使用按钮设置为常规图标。

使用的图标：

Arrow Left | Arrow Right

---

已编辑从按钮顶部到底部添加OP的最后请求

小提琴Here!