1

一两天来我一直在寻找解决方案，但由于我不习惯编写 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
{
}
4

4 回答 4

5

这里的问题是，由于您内部的元素#main div是浮动的，因此它们被认为与您的流程不同div，因此它不会调整大小以适应它们。解决此问题的方法是：

  • 添加overflow: hidden;到您的#main样式中。
  • #main通过添加浮动您的float: left;.
  • 将此附加到您的#main div: <div style = "clear: both;"></div>（这是最不推荐的方法）。
于 2012-09-05T19:17:38.907 回答
2

您需要清除#main的子元素的浮动

不要做其他一些人建议的事情（添加一个元素来清除你的浮动；不好的做法），使用一个伪元素。只需使用以下 CSS，瞧！

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

这是一个小提琴。这个粉红色背景用于显示上述#main的结果。

于 2012-09-05T19:59:52.353 回答
1

您的主 div ( #main) 尚未浮动，但您在其中有浮动元素。

要清除浮动添加 CSS：

#main {
    overflow: hidden;
}
于 2012-09-05T19:17:59.503 回答
1

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

<div style="clear:both"></div>
于 2012-09-05T19:20:24.723 回答