0

この 3 つのボックスが並べられない理由がわかりません。私はすべてを試しましたが、運がありません。

私は 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 に答える