Question

我有一个搜索结果页面，我正在尝试布局但是我在将结果置于页面中心时遇到问题。这是我目前的布局：

enter image description here

较暗的边框用于页面上最外面的divs。如果页面调整大小，红色边框是我希望结果填充而不是下拉或重新组织的方式。

以下是使用ASP.NET

设计的html内容

<div class="Content_Container">
    <div class="SearchResultContentDiv">
        <div id="SearchBar" class="PatientSearchBarDiv">
            <div id="InnerSearchBarDiv" >
                <SB:SearchBox ID="SearchBox" runat="server"></SB:SearchBox>
                <asp:LinkButton ID="AdvancedSearchLink" runat="server">Advanced Search</asp:LinkButton>
            </div>
        </div>
        <div id="SearchFilter" class="PFSDiv" >
            <SFC:SearchFilterControl ID="SearchFilterControl" runat="server"></SFC:SearchFilterControl>
        </div>
        <div id="SearchResultDiv" >
            <SRC:SearchResultControl ID="SearchResultControl" runat="server" /></SRC:SearchResultControl>
        </div>
        <div id="SearchResultClearDiv"></div>
   </div>
    <div>
        <asp:Label ID="lblTraverseDisplay" runat="server" CssClass="SearchResultRecordsLabel" />
    </div>
</div>

CSS有点混乱。

.SearchResultContentDiv {
    padding: 0px;
    position: relative;
}

顶栏有这样的布局：

.PatientSearchBarDiv {
    height: 50px;
    border-style: dotted;
}

过滤器具有以下布局：

.PFSDiv {
    width: 130px;
    float: left;
    margin: 3px 5px 5px 3px;
    color: #2D666F;
    border-style: solid;
}

主搜索结果布局为：

.SearchResultDiv {
    float: left;
    margin-left: 135px;
    border-style: solid;
}

底部div框没有布局。

就像我上面说的那样，我希望中心的搜索结果填满空白区域，但不要移动和/或重新排列。例如，我尝试将width: 100%添加到.SearchResultDiv，但导致搜索结果低于搜索过滤器。

我还在学习HTML和CSS布局，所以我不确定我应该使用哪种最佳组合。一如既往，非常感谢任何和所有建议。

哦，我不知道这是否相关，但搜索结果是使用ASP.NET的Repeater生成的，我还没弄明白如何扩展其余的宽度。页。

最后，我考虑使用Tables，但我read这通常不是一个好主意。

更新

在阅读@CBRRacer关于float:left将如何导致元素“收缩包装”的评论后，我决定删除该属性。

在上面的代码中，我有一个标记为SearchResultControl的控件，其布局设置为：

<asp:Panel ID="SearchResultPanel" runat="server" ScrollBars="Auto" style="background-color:White;margin-right:5px;">
    <asp:Repeater ID="Repeater1" runat="server" 
        onitemcreated="Repeater1_ItemCreated" >        
        <ItemTemplate>
            <asp:PlaceHolder ID="ItemTemplatePlaceHolder" runat="server"></asp:PlaceHolder>
        </ItemTemplate>
        <SeparatorTemplate>
        <tr>
        <td colspan="5" style="background-color: White"><hr /></td>
        </tr>
        </SeparatorTemplate>
    </asp:Repeater>
</asp:Panel>

为float:left设置了Panel，导致它无法填满我想要的内容。删除后，我得到了我正在寻找的结果。

Answer 1

在.SearchResultDiv上，您可以尝试将width设置为略低于100％（99％或98％），或者您可以尝试将其margin-right设置为0。

Answer 2

试试这个：

<div id="SearchResultDiv" style="width: 100%;" >
     <div style="width:auto; margin: 0 auto;">
        <SRC:SearchResultControl ID="SearchResultControl" runat="server" /></SRC:SearchResultControl>
     </div>
</div>

Answer 3

我删除了float:left中设置的SearchResultControl。见更新。

Div布局麻烦

3 个答案: