我已经为这个问题寻找了一两天的解决方案,但是由于我不习惯编写web应用程序,我似乎找不到问题所在。。
我有预感,这和我往左边漂两个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
{
}
最佳答案
这里的问题是,由于您的#main
div
中的元素是浮动的,因此它们在不同于您的div
的流中被考虑,因此它不会调整大小以适应它们。解决这个问题的方法是:
将overflow: hidden;
添加到您的#main
样式中。
通过添加#main
浮动float: left;
。
将此附加到#main
div
:<div style = "clear: both;"></div>
(这是最不可取的方法)。