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模式解决的。 技巧是使用固定的填充固定列的值（如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%; 
} 

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

最好的问候，

UPDATE：是的，我看到该示例将为三列布局提供解决方案，而只需要双列解决方案。事实上，双列解决方案更容易实现。不过，你必须稍微处理一下。