主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

回答

相關問題