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

Question

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

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

我不知道这是否重要，但我的 div 位于 ASP Page 中的 ContentPlaceHolder 内。

这是我的代码：

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

}

我之前使用了一个 table 和一个 tr 和三个 tds，但我无法让它成为我想要的方式。

这是我想要达到的目标的说明，这可能比我的解释更好：

Answer 1

您需要格式化日历并使用绝对位置放置列，然后放置在您假装的位置，并避免在添加其他内容时布局进一步中断：

请看这个Fiddle example!

阅读有关此类解决方案的更多信息：

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

注意事项：

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

---

已编辑：

第二个Fiddle Example 带有一个没有“坐标”的主包装器。

---

再次编辑

另一个Fiddle Example 使用样式为常规图标的按钮。

使用的图标：

Arrow Left | Arrow Right

---

编辑添加了来自 OP 的最后一个请求，按钮从上到下

小提琴Here!