CSS 流体/静态布局

Question

我有以下 2 列 div 布局。左列需要有 75px 的宽度以容纳图像，但右列需要流入其所有父容器。

这个网格位于一个用户控件中，该控件被添加到多个站点/页面，每个站点/页面都有不同的布局，因此父容器的宽度不同——有些可以更宽，有些可以更细，因此我不能使用 % .如果 % 太高，它会换行。如何在不使用明显的表格选项的情况下使其变得灵活？

<telerik:RadGrid 
        ID="ArticlesGrid" 
        AlternatingItemStyle-BorderStyle="None"
        AlternatingItemStyle-BackColor="Transparent"
        BorderStyle="None"
        PageSize="20" 
        runat="server" 
        AllowPaging="True"
        GridLines="None"
        >
        <PagerStyle Mode="NumericPages" BackColor="#FFFFFF" AlwaysVisible="false"  ShowPagerText="false" EnableSEOPaging="True"></PagerStyle>
        <MasterTableView AutoGenerateColumns="False" DataKeyNames="Id">

            <HeaderStyle BackColor="#FFFFFF" BorderStyle="None"  />
            <Columns>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <div id="AllArticles_LeftColumn" style="float: left; width: 75px; margin-right: 40px;">
                            <a id="lnkArticleImage" runat="server">
                                <img runat="server" src='<%# Eval("ThumbnailImagePath")%>'  class="ArticleImage"
                                    alt='<%# Eval("ImageAltText")%>' id="imgArticle" />
                            </a>
                        </div>
                        <div id="AllArticles_RightColumn" style="float: left;">
                            <h1>
                                <asp:HyperLink CssClass="ArticleTitle" ID="lnkHeadline" runat="server" Text='<%# Eval("Headline")%>'></asp:HyperLink>
                            </h1>
                            <asp:Label ID="litContent" CssClass="ArticleBody" Text='<%# Eval("PreviewText")%>'
                                runat="server"></asp:Label><br />
                            <br />
                            <small>
                                <a id="lnkReadMore" class="ArticleReadMore" runat="server">
                                <%# Eval("LinkText")%></a>
                            </small>
                            <br />
                            <br />
                            <div>
                                <div style="float: left;" id="AllArticlePostedBy">
                                    <small><span class="ArticlePostedBy">Posted </a>
                                        on 
                                        <asp:Label ID="lblDatePosted" runat="server" Text='<%# String.Format("{0:MMMM dd yyyy}", Eval("PublicationUTC")) %>'></asp:Label>
                                    </span>
                                    </small>
                                </div>
                                <div id="AllArticleCommentCount" style="float:right;">
                                <asp:Panel ID="pnlCommentsDisabled" Visible="true" runat="server">
                                    <span style="color: #cccccc; text-align: right;">Comments Disabled</span>
                                </asp:Panel>
                            </div>
                            </div>
                            <div class="ArticleSeperator">&nbsp;</div>
                        </div>
                    </ItemTemplate>

                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings EnableAlternatingItems="false"></ClientSettings>
    </telerik:RadGrid>

Answer 1

在不提供现成的解决方案的情况下，我想给你一些提示。通常使用floating 模式可以解决这个问题。 技巧 是为固定列使用固定的 padding 值(如 75px)，而主列完全没有宽度，这将使用增加现有空间。

这篇来自一些 css 先驱的相当古老且相当不错的文章解释了它是如何完成的: http://www.alistapart.com/articles/holygrail

这是一个快速摘录的片段(不过，我想你需要阅读上面的文章才能使用它)

#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}

这应该可以帮助您自己解决问题:)

最好的问候，

更新:是的，我看到该示例将为三列布局提供解决方案，而只需要两列解决方案。事实上，两列解决方案更容易实现。不过，您还需要做一些工作。