主div不包含其他divs

我一直在寻找这样的解决方案像一两天，但因为我不习惯编码web应用程序，我似乎无法找到问题..主div不包含其他divs

我有一个预感它必须做，我做两个浮动左边的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 
{ 
}

来源

2012-09-05 8bitcat

在[JSFiddle]（http://jsfiddle.net）上看到这个问题真是太好了。） – raina77ow

清除HTML格式。 :) – iambriansreed

是'HeaderTemplate'，'ItemTemplate'和'FooterTemplate'什么ASP特定？如果没有，您的标签格式不正确。例如你的表格会在HeaderTemplate中打开，但不会在那里关闭。我建议立即在table标签后移动HeaderTemplate。同样适用于FooterTemplate，它应该在表的结尾处关闭_before_。 – Mark

这里的问题是，由于内部元素的#maindiv是浮动的，他们在不同的流量会被认为比你div，因此不调整大小以适应它们。方法来解决这个问题是：

添加overflow: hidden;到您的#main造型。
通过添加float: left;来浮动您的#main。
将此附加到您的#maindiv：<div style = "clear: both;"></div>（这是最不可取的方法）。

来源

2012-09-05 19:17:38 Chris

类“main”没有元素。 – iambriansreed

@anonymousdownvotingislame我正在看他的CSS：'div.main'，哎呀。虽然没有必要仅仅因为我在引用他的'div'时使用类而不是ID来降低效果。 – Chris

您应该添加一个注意清除元素被皱眉。 – Shmiddty

您的主div（#main）未浮动，但您已将浮动元素放入其中。

以清除浮动添加CSS：

#main { 
    overflow: hidden; 
}

来源

2012-09-05 19:17:59 iambriansreed

结束标记前添加一个明确的。

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

来源

2012-09-05 19:20:24 verheesj

这是一个不好的做法。 – Shmiddty

这是一种不好的做法？ – verheesj

这是额外的标记，没有任何用处。 – Shmiddty

你需要清除子元素的彩车#main

而不是做一些其他的建议（添加元素为清除花车的目的;不好的做法），使用伪元素。只需使用下面的CSS和瞧！

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

Here's a fiddle.这粉红色背景是有显示上述的为#main结果。

来源

2012-09-05 19:59:52

主div不包含其他divs

回答

相关问题