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：是的，我看到該示例將爲三列布局提供解決方案，而只需要雙列解決方案。事實上，雙列解決方案更容易實現。不過，你必須稍微處理一下。