如何确保每个DIV自己出现而不重叠
[英]How to ensure each DIV appears on it's own without overlapping
问题描述
I am using code-behind to populate a repeater (please disregard inline css, it will be changed once I have it working correctly): 
我正在使用代码隐藏来填充转发器（请忽略内联css，一旦我使其正常工作，它将被更改）：
<asp:Repeater runat="server" ID="rptContent">
<HeaderTemplate>
<div style="width: 85%; margin: 0 auto; background: #000000; padding: 5px; border: 1px solid yellow;">
</HeaderTemplate>
<ItemTemplate>
<div style="float: left; width: 34%; border: 1px solid green;">
<div style="width: 100%; padding: 2%; text-align: center;">
<img src="http://westmedgroup.com/<%# Eval("Image").ToString() %>" />
<h2 style="color: #CA006C;"><%# Eval("Physician Name").ToString() %></h2>
</div>
</div>
<div style="float: right; width: 64%; border: 1px solid red;">
<div style="width: 45%; padding: 2%; text-align: left; float: left;">
<div>
<div style="font-family: 'consolas'; font-size: 22px; font-weight: bold; background: url(theImages/topmenu.png) no-repeat; width: 260px; height: 47px;">
<span style="position: relative; top: 18%; left: 8%;">SPECIALTIES</span>
</div>
<div style="background: url(theImages/botmenu.png) repeat-y; width: 260px;">
<div style="padding-left: 20px;">
<ul style="padding: 8px; margin: 0; list-style-type: none; color: #0072C7;">
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("Specialty1").ToString() %></li>
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("Specialty2").ToString() %></li>
</ul>
</div>
</div>
</div>
<div>
<div style="font-family: 'consolas'; font-size: 22px; font-weight: bold; background: url(theImages/topmenu.png) no-repeat; width: 260px; height: 47px;">
<span style="position: relative; top: 18%; left: 8%;">LOCATIONS</span>
</div>
<div style="background: url(theImages/botmenu.png) repeat-y; width: 260px;">
<div style="padding-left: 20px;">
<ul style="padding: 8px; margin: 0; list-style-type: none; color: #0072C7;">
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("Office1").ToString() %></li>
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("Office2").ToString() %></li>
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("Office3").ToString() %></li>
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("Office4").ToString() %></li>
</ul>
</div>
</div>
</div>
</div>
<div style="width: 45%; padding: 2%; text-align: left; float: right;">
<div>
<div style="font-family: 'consolas'; font-size: 22px; font-weight: bold; background: url(theImages/topmenu.png) no-repeat; width: 260px; height: 47px;">
<span style="position: relative; top: 18%; left: 8%;">GENDER</span>
</div>
<div style="background: url(theImages/botmenu.png) repeat-y; width: 260px;">
<div style="padding-left: 20px;">
<ul style="padding: 8px; margin: 0; list-style-type: none; color: #0072C7;">
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("Gender").ToString() %></li>
</ul>
</div>
</div>
</div>
<div>
<div style="font-family: 'consolas'; font-size: 22px; font-weight: bold; background: url(theImages/topmenu.png) no-repeat; width: 260px; height: 47px;">
<span style="position: relative; top: 18%; left: 8%;">PHONE NUMBER</span>
</div>
<div style="background: url(theImages/botmenu.png) repeat-y; width: 260px;">
<div style="padding-left: 20px;">
<ul style="padding: 8px; margin: 0; list-style-type: none; color: #0072C7;">
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("PhoneNum").ToString() %></li>
</ul>
</div>
</div>
</div>
<div>
<div style="font-family: 'consolas'; font-size: 22px; font-weight: bold; background: url(theImages/topmenu.png) no-repeat; width: 260px; height: 47px;">
<span style="position: relative; top: 18%; left: 8%;">FAX NUMBER</span>
</div>
<div style="background: url(theImages/botmenu.png) repeat-y; width: 260px;">
<div style="padding-left: 20px;">
<ul style="padding: 8px; margin: 0; list-style-type: none; color: #0072C7;">
<li style="font-family: 'consolas'; font-size: 16px; font-weight: bold; padding: 6px; text-transform: uppercase;"><%# Eval("FaxNum").ToString() %></li>
</ul>
</div>
</div>
</div>
<div>
<div style="width: 260px; text-align: right;"><a class="loginButton" href="#">View Full Profile</a></div>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
What I am looking to do is achieve the following so each physician has his/her own box within the yellow border DIV: 我要做的是实现以下目标，以便每个医师在黄色边框DIV中都有自己的框：
But what I am getting in FireFox (As you can see the the yellow box is not wrapping each DIV-child group: 但是我在FireFox中得到了什么（如您所见，黄色框并未包装每个DIV子组：
What I am getting in IE is: 我在IE中得到的是：
How can I achieve it? 我该如何实现？ I am guessing somewhere the repeater is being parsed incorrectly? 我猜转发器被错误地解析了吗？
1 个解决方案
解决方案1
3 已采纳 2014-05-27 20:45:47
at the first look, i believe you need to clear the floats you are using. 乍一看，我相信您需要clear的floats 。
<div style="clear:both">
<div style="float:right;"></div>
<div style="float:left;"></div>
</div>
<div style="clear:both">
<div style="float:right;"></div>
<div style="float:left;"></div>
</div>
<div style="clear:both">
<div style="float:right;"></div>
<div style="float:left;"></div>
</div>
if you dont use clear:both (or similar techniques), the parent divs will have no height, as the children using float, aquire no height. 如果您不使用clear：Both（两者都使用）（或类似技术），则父级div不会有高度，因为使用float的子级不会获取任何高度。
if you cannot use a wrapping div, you can also just break the floating with a inline technique 如果您不能使用换行div，也可以使用内联技术来打破浮动状态
<div style="float:left"></div>
<br style="clear:both" />
currently preferred solutions are to use the pseudo selector :after , where you will need some proper block style css. 当前首选的解决方案是使用伪选择器:after ，在这里您将需要一些适当的块样式css。 (copied from backbone) （从主干复制）
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
a simple tutorial on this, showing the grids, http://www.quirksmode.org/css/clearing.html 关于此的简单教程，显示了网格， http：//www.quirksmode.org/css/clearing.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.