Question

我无法弄清楚为什么这三个盒子不能排队。我已经尝试了一切，但没有运气。

我设置jfiddle我认为你可能很容易看到这种方式。问题是中间盒子下垂。

中间框：

 <div class="bg-3">
 <div class="indent">
 <div class="wrapper margin-bot"><img title="duralume new" src="http://www.webstertoolbox.com/media/wysiwyg/images/NEw.png" alt="new" width="62" height="52" /><a href="http://www.webstertoolbox.com/index.php/products/duralume-collection-usa.html"><img style="padding-left: 34px;"           src="http://www.webstertoolbox.com/media/wysiwyg/images/duralume.gif" alt="" width="144"      height="33" /></a>
 <div class="extra-wrap">&nbsp;</div>
 </div>
 <ul class="ul-1">
 <li><span style="font-family: 'trebuchet ms', geneva;">Expert Domestic Tech      Support</span></li>
 <li><span style="font-family: 'trebuchet ms', geneva;">Made in USA</span></li>
 <li><span style="font-family: 'trebuchet ms', geneva;">Custom solutions</span></li>
 <li><span style="font-family: 'trebuchet ms', geneva;">On-site Engineers</span></li>
 </ul>
 <a class="button-1 margin-left"      href="http://www.webstertoolbox.com/index.php/products/duralume-collection-usa.html">Click      to Order Now!</a></div>
 </div>

您可以在此处找到它：http://jsfiddle.net/GWUDG/

以下是完整结果：http://jsfiddle.net/GWUDG/embedded/result/

如果您有任何疑问，请与我们联系。

谢谢，弗兰克G。

Answer 1

在这里，edited your Fiddle

主要变化是：

.bg-3 {
  display: block;
  float: left;
}

您需要清除.wrapper

上的花车

.floatstop:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
:first-child + html .floatstop {
    min-height: 1px;
}
* html .floatstop {
    height: 1%;
}

<div class="wrapper floatstop margin-bot1">

三个盒子不会排队

1 个答案: