Question

我一直在寻找一个解决方案，比如一两天，但由于我不习惯编写Web应用程序，我似乎无法找到问题..

我有预感，因为我确实向左浮动了两个div。

问题是为什么我的主要div不包含整个页面？

这是我的HTML ..！

<body onLoad="initializePage()">
<script type="text/javascript">
        $('#Button1').click(function() {

        });
    </script>
<input type="button" id="Button1" value="korv" onClick="hidedivs()" />
<div id="main">
    <div id="searchholder">
        <div id="slider" class="searching"></div>
    </div>
    <div class="left">
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <table id="mytable" cellspacing="0">
                <thead>
                    <tr>
                        <th scope="col" abbr="Sidor/Artiklar" class="nobg">Sidor/Artiklar</th>
                        <th scope="col" abbr="Mozrank">MozRank</th>
                        <th scope="col" abbr="PR">PR</th>
                        <th scope="col" abbr="Dual 1.8GHz">Fri tillgång</th>
                        <th scope="col" colspan="2" abbr="Dual 2.5GHz">Välj själv</th>
                    </tr>
                </thead>
            </HeaderTemplate>
            <ItemTemplate>
                <tr data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'>
                    <th scope="row" abbr="Model" class="spec"><%# DataBinder.Eval(Container.DataItem, "namn_domain")%> </th>
                    <td class="alt" ><%# DataBinder.Eval(Container.DataItem, "moz_domain")%></td>
                    <td class="alt"><%# DataBinder.Eval(Container.DataItem, "pr_domain")%></td>
                    <td class="alt"><b></b>
                        <input type='<%# DataBinder.Eval(Container.DataItem, "type_domain")%>' name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value='<%# DataBinder.Eval(Container.DataItem, "faccess_domain")%>' onClick="calculatePrice();disableTB(this.name);" />
                        "Fri tillgång" </td>
                    <td class="alt"><input type="radio" name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value="0"  onclick="calculatePrice();enableTB(this.name, this.checked)" />
                        "Skriv ditt antal själv" </td>
                    <td class="alt" data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'><input type="text"  name='<%# DataBinder.Eval(Container.DataItem, "moz_domain")%>' id='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>'  Enabled="false" Width="40px" onKeyUp="calculatePrice()" style="background-color:#eeeeee" /></td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    <div id="pricingdetails" class="price">Priset för dina artiklar blir: </div>
</div>

我的.css样式是

.price
{
 font-family:"Verdana";
 font-size:40px;
 color:Green;
 float: left;
 border-right: 1px solid #C1DAD7;
 border-bottom: 1px solid #C1DAD7;
 border-top: 1px solid #C1DAD7;
 color: #797268;
 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 background: -moz-linear-gradient(center top , #FFFFFF 0%, #EDEDED 100%) repeat scroll 0 0 transparent;
 display: inline; 
 }

 div.searchholder
{
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px;
width: 480px;    
}

div.main
{
}

div.left
{
float: left;  
}
.searching
{
}

Answer 1

这里的问题是，由于#main div中的元素已经浮动，因此它们被视为与您的div不同的流量，因此它不会调整为适合他们。解决这个问题的方法是：

将overflow: hidden;添加到您的#main样式。
通过添加#main

float: left;

将此附加到#main div：<div style = "clear: both;"></div>（这是最不可取的方法）。

Answer 2

您需要清除 #main

的子元素的浮点数

不要执行其他人提出的建议（添加元素以清除浮动;不良做法），而是使用伪元素。只需使用以下CSS并瞧！

#main::after {
 clear:both;
 content: "";
 display: table;
}

Here's a fiddle.此粉红色背景用于显示 #main 的上述结果。

Answer 3

你的主div（#main）没有浮动，但你已经在里面浮动了元素。

要清除浮动，请添加CSS：

#main {
    overflow: hidden;
}

Answer 4

在结束标记之前添加一个清除。

<div style="clear:both"></div>

主div不包含其他div

4 个答案: