主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
{
}
这里的问题是,由于内部元素的#main
div
是浮动的,他们在不同的流量会被认为比你div
,因此不调整大小以适应它们。方法来解决这个问题是:
- 添加
overflow: hidden;
到您的#main
造型。 - 通过添加
float: left;
来浮动您的#main
。 - 将此附加到您的
#main
div
:<div style = "clear: both;"></div>
(这是最不可取的方法)。
类“main”没有元素。 – iambriansreed
@anonymousdownvotingislame我正在看他的CSS:'div.main',哎呀。虽然没有必要仅仅因为我在引用他的'div'时使用类而不是ID来降低效果。 – Chris
您应该添加一个注意清除元素被皱眉。 – Shmiddty
您的主div(#main
)未浮动,但您已将浮动元素放入其中。
以清除浮动添加CSS:
#main {
overflow: hidden;
}
你需要清除子元素的彩车#main
而不是做一些其他的建议(添加元素为清除花车的目的;不好的做法),使用伪元素。只需使用下面的CSS和瞧!
#main::after {
clear:both;
content: "";
display: table;
}
Here's a fiddle.这粉红色背景是有显示上述的为#main结果。
在[JSFiddle](http://jsfiddle.net)上看到这个问题真是太好了。 ) – raina77ow
清除HTML格式。 :) – iambriansreed
是'HeaderTemplate','ItemTemplate'和'FooterTemplate'什么ASP特定?如果没有,您的标签格式不正确。例如你的表格会在HeaderTemplate中打开,但不会在那里关闭。我建议立即在table标签后移动HeaderTemplate。同样适用于FooterTemplate,它应该在表的结尾处关闭_before_。 – Mark