CSS Fluid / Static Layout

Question

У меня есть следующие 2 столбца макета div.Левая колонка должна иметь ширину 75 пикселей для размещения изображения, но правая колонка должна перетекать во весь его родительский контейнер.

Эта сетка находится в пользовательском элементе управления, который добавляется к нескольким сайтам / страницам, каждый из которых имеет разную компоновку, поэтому родительский контейнер различается по ширине - некоторые могут быть шире, некоторые могут быть тоньше, поэтому я могут использовать%.Если% слишком высок, он оборачивается.Как я могу сделать это гибким, не переходя к очевидной опции стола?

<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

без предоставления готового к использованию решения, я хотел бы дать вам несколько советов.Обычно эта проблема решается с использованием плавающего паттерна.Хитрость заключается в использовании фиксированных отступов Значения для фиксированного столбца (например, 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%;
}

Это должно помочь вам решить вашу проблему самостоятельно:)

С уважением,

ОБНОВЛЕНИЕ: Да, я вижу, что пример предоставит решение для макета с тремя столбцами, в то время как требуется только решение с двумя столбцами.На самом деле, решение с двумя колонками даже гораздо проще достичь.Тебе придется немного поработать над этим.