CSS Fluid/Static布局
CSS Fluid/Static布局
提问于 2010-06-16 05:14:18
我有以下两列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"> </div>
</div>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<ClientSettings EnableAlternatingItems="false"></ClientSettings>
</telerik:RadGrid>回答 1
Stack Overflow用户
回答已采纳
发布于 2010-06-16 05:24:41
在不提供现成的解决方案的情况下，我想给您一些提示。通常使用浮点模式来解决此问题。诀窍是对固定列(如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:是的，我看到这个示例将提供一个三列布局的解决方案，而只需要一个两列的解决方案。事实上，两列解决方案甚至更容易实现。不过，您必须在这方面做一些工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3049087
复制相关文章
相似问题
腾讯云开发者
