Css 我想不出为什么最后一张图片会从横幅上出现，你能看一下吗？

最后一张图片被推出了横幅，你能帮我看一下css代码吗？图片很小，所以可能不是这个尺寸

<div id="bannercontainer">
<ul id="banner-ids">
<li class="banner-id">
<iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=r0ab-21&o=2&p=48&l=ur1&category=consumerelectronics&f=ifr" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</li>
<li class="banner-id">
<iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=r0ab-21&o=2&p=20&l=ur1&category=kindle&banner=06V9WMDCWSM9ADC9C1R2&f=ifr" width="120" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</li>
<li class="banner-id">
<script type="text/javascript">
var uri = 'http://impgb.tradedoubler.com/imp?type(img)g(16853792)a(1921176)' + new String (Math.random()).substring (2, 11);
document.write('<a href="http://clkuk.tradedoubler.com/click?p=3430&a=1921176&g=16853792" target="_BLANK"><img src="'+uri+'" border=0></a>');
</script>
</li>
<li class="banner-id">
<script type="text/javascript">
var uri = 'http://impgb.tradedoubler.com/imp?type(img)g(17412240)a(1921176)' + new String (Math.random()).substring (2, 11);
document.write('<a href="http://clkuk.tradedoubler.com/click?p=68951&a=1921176&g=17412240" target="_BLANK"><img src="'+uri+'" border=0></a>');
</script>
</li>
</ul>
</div>

---

如果图像被推出（按高度）。 然后不指定高度：300px； 那就切断那条线。 （我的英语不好，请容忍我的错误）

---

试试这个，它会让他们排成一行：

#banner-ids {
   display: block;
   width: 800px;
   height: auto;
   overflow: auto;
   padding: 0;
   background: #eee;
   border: 1px solid #000;
}

.banner-id {
   display:inline;
   float: left;
   padding: 0 5px 0 5px;
}

这将产生以下结果：

---

查看布局，我假设您希望它们堆叠在网格配置中，两个位于横幅的第一行，后两个位于横幅的第二行。您可以从您的顺序中看出，第一个和第三个的组合高度超过了您设定的300乘50px的高度。只是观察到你的网格在盒子里无法正确堆叠

真正的问题是，您的第三个

没有按照“创建新行”的意图进行堆叠。要创建此效果，您需要添加清除：向左以强制此特征

现在，这将强制第二行，但将导致该行无法“装入”#横幅ID修复此“损坏”父容器在

之后和

之前添加

，并将样式从#横幅ID移动到#横幅容器，然后移除/调整高度

建议代码：

<div id="bannercontainer">
            <ul id="banner-ids">
                <li class="banner-id">
                    <iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=r0ab-21&o=2&p=48&l=ur1&category=consumerelectronics&f=ifr" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
                </li>
                <li class="banner-id">
                    <iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=r0ab-21&o=2&p=20&l=ur1&category=kindle&banner=06V9WMDCWSM9ADC9C1R2&f=ifr" width="120" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
                </li>
                <li class="banner-id" style="clear:left">
                    <script type="text/javascript">
                        var uri = 'http://impgb.tradedoubler.com/imp?type(img)g(16853792)a(1921176)' + new String(Math.random()).substring(2, 11);
                        document.write('<a href="http://clkuk.tradedoubler.com/click?p=3430&a=1921176&g=16853792" target="_BLANK"><img src="' + uri + '" border=0></a>');

                    </script>
                </li>
                <li class="banner-id">
                    <script type="text/javascript">
                        var uri = 'http://impgb.tradedoubler.com/imp?type(img)g(17412240)a(1921176)' + new String(Math.random()).substring(2, 11);
                        document.write('<a href="http://clkuk.tradedoubler.com/click?p=68951&a=1921176&g=17412240" target="_BLANK"><img src="' + uri + '" border=0></a>');

                    </script>
                </li>
            </ul>
            <div style="clear: both"></div>
        </div>

---

如果你提供了一个使用Chromium Inspector的工作示例，我会看一看……你能用link更新你的帖子吗？如果不知道IMG的宽度或工作范围，很难说example@feeela好的，检查reacheasy.co.uk，车身店标志应该在横幅上，但它会出现并将其他横幅推离其正常位置该页面上有车身店标志吗？

#banner-ids {
   display: block;
   width: 800px;
   height: auto;
   overflow: auto;
   padding: 0;
   background: #eee;
   border: 1px solid #000;
}

.banner-id {
   display:inline;
   float: left;
   padding: 0 5px 0 5px;
}

<div id="bannercontainer">
            <ul id="banner-ids">
                <li class="banner-id">
                    <iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=r0ab-21&o=2&p=48&l=ur1&category=consumerelectronics&f=ifr" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
                </li>
                <li class="banner-id">
                    <iframe src="http://rcm-uk.amazon.co.uk/e/cm?t=r0ab-21&o=2&p=20&l=ur1&category=kindle&banner=06V9WMDCWSM9ADC9C1R2&f=ifr" width="120" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
                </li>
                <li class="banner-id" style="clear:left">
                    <script type="text/javascript">
                        var uri = 'http://impgb.tradedoubler.com/imp?type(img)g(16853792)a(1921176)' + new String(Math.random()).substring(2, 11);
                        document.write('<a href="http://clkuk.tradedoubler.com/click?p=3430&a=1921176&g=16853792" target="_BLANK"><img src="' + uri + '" border=0></a>');

                    </script>
                </li>
                <li class="banner-id">
                    <script type="text/javascript">
                        var uri = 'http://impgb.tradedoubler.com/imp?type(img)g(17412240)a(1921176)' + new String(Math.random()).substring(2, 11);
                        document.write('<a href="http://clkuk.tradedoubler.com/click?p=68951&a=1921176&g=17412240" target="_BLANK"><img src="' + uri + '" border=0></a>');

                    </script>
                </li>
            </ul>
            <div style="clear: both"></div>
        </div>

            #bannercontainer {
                display: block;
                width: 800px;
                padding: 0;
                background: #eee;
                border: 1px solid #000;
            }
            .banner-id {
                border: medium none;
                display: block;
                float: left;
                padding: 0 70px 5px 0;
            }