0

我想不通为什么这三个盒子不能排成一行。我已经尝试了一切，但没有运气。

我设置了 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。

4

1 回答 1

1

给你，编辑你的小提琴

主要变化是：

.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">
于 2013-08-03T22:34:11.817 回答