如何确保每个DIV独立出现而不重叠

Question

我正在使用代码隐藏来填充转发器（请忽略内联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>

我要做的是达到以下目的，以便每个医生在黄色边框内都有自己的盒子DIV：

但是我在FireFox中得到了什么（正如你可以看到黄色框没有包裹每个DIV子组：

我在IE中获得的是：

我怎样才能实现它？我猜某个转发器被错误地解析了？

Answer 1

初看起来，我相信你需要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>

如果你不使用clear：both（或类似的技巧），父div将没有高度，因为使用float的孩子，没有高度。

如果你不能使用包装div，你也可以使用内联技术打破浮动

<div style="float:left"></div>
<br style="clear:both" />

目前首选的解决方案是使用伪选择器:after，您需要一些适当的块样式css。 （从骨干复制）

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

一个简单的教程，显示网格，http://www.quirksmode.org/css/clearing.html