2

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

我试图遵循这个最终成为这个网站的CSS 示例： http ://www.alistapart.com/d/holygrail/example_3.html ，我已经让divs 并排 - 但我可以' t 让左右列垂直对齐或与中心 div 标签具有相等的高度，我猜这是同一件事。

我不知道这是否重要，但我的 divContentPlaceHolder在 ASPPage中。

这是我的代码：

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

}

我以前使用 atable和 atr和三个tds，但我无法让它成为我想要的方式。

这是我想要实现的目标的说明，这可能比我的解释更好： 设计目标

4

1 回答 1

3

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

请看这个小提琴的例子！

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

CSS 位置属性 | CSS-Tricks - 流体宽度等高列

笔记：

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

编辑：

带有没有“坐标”的主包装器的第二个小提琴示例。

再次编辑

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

使用的图标：

向左箭头| 向右箭头

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

小提琴在这里！

于 2012-05-09T11:34:54.887 回答