我遇到了CSS讓廣告排隊的問題

我正在建立一個網站，我有三個廣告面向我的頁面底部。他們似乎在自己的路線上。我已經嘗試從創建浮動div到刪除div。但我似乎無法弄清楚什麼部分的CSS不允許這些框在頁面上筆直。我遇到了CSS讓廣告排隊的問題

下面是三個框代碼：

<div class="wrapper margin-bot1"> 
    <div class="bg-3"> 
     <div class="indent"> 
      <div class="wrapper margin-bot"> 
       <img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" /> 
       <img src="http://www.webstertoolbox.com/media/wysiwyg/images/logo_archilume.png" alt="" width="150" height="41" /> 
      </div> 
      <ul class="ul-1"> 
       <li><a href="moreARCHI.html">Made in USA </a></li> 
       <li><a href="moreARCHI.html">Expert Domestic Tech Support</a></li> 
       <li><a href="moreARCHI.html">High-end installations</a></li> 
       <li>Robust features</li> 
      </ul> 
      <a class="button-1 margin-left" href="more.html">Click to Order Now!</a> 
     </div> 
    </div> 
    <div class="bg-3"> 
     <div class="indent"> 
      <div class="wrapper margin-bot"> 
       <img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" /> 
       <a href="moreGEN.html"> <img src="http://www.webstertoolbox.com/media/wysiwyg/images/GenLume-Logo.png" alt="" width="103" height="41" /></a> 
       <div class="extra-wrap">&nbsp;</div> 
      </div> 
      <ul class="ul-1"> 
       <li><a class="test123" href="moreGEN.html">Quick solutions</a></li> 
       <li><a href="moreGEN.html">Turn-key applications</a></li> 
       <li><a href="moreGEN.html">Certified</a></li> 
       <li><a href="moreGEN.html">Competitive pricing</a></li> 
      </ul> 
      <a class="button-1 margin-left" href="moreGEN.html">Click to Order Now!</a> 
     </div> 
    </div> 
    <div class="bg-3"> 
     <div class="indent"> 
      <div class="wrapper margin-bot"> 
       <img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" /> 
       <div class="extra-wrap"> 
        <h4>DuraLume</h4> 
        <h5>Series</h5> 
       </div> 
      </div> 
      <ul class="ul-1"> 
       <li><a href="more.html">Expert Domestic Tech Support</a></li> 
       <li><a href="more.html">Made in USA </a></li> 
       <li><a href="more.html">Custom solutions</a></li> 
       <li><a href="more.html">On-site Engineers</a></li> 
      </ul> 
      <a class="button-1 margin-left" href="more.html">Click to Order Now!</a> 
     </div> 
    </div> 
</div>

我無法弄清楚如何正確顯示CSS，但你可以找到實際的網站在這裏：http://www.webstertoolbox.com/

如果你看看下面大橫幅，你會看到一個ArchiLume，GenLume和DuraLume框在頁面上垂直運行。我希望他們跨頁面出現。

有人可以告訴我我做錯了什麼，以及如何解決它？

感謝，弗蘭克G.

來源

2013-07-31 Frank G.

非常容易和快速解決它。只是改變行CSS文件名爲homeads.css 128：

.bg-3 
{ 
    background: url(../images/bg-4.png) left top no-repeat; 
    width: 33%; // Changed this from 100% to 33% 
    height: 322px; //Changed from 268px to 322px 
    overflow: hidden; 
    float: left; // Added the float left 
}

乾杯，薩諾斯

編輯：做變更後上述，您將需要添加一對夫婦更多的變化來修復幾件事情會有點失調。如右邊框將不再可見。以下是您需要做的修改來解決這個問題。

在homeads.css線33：

.main 
{ 
    width: 950px; // Reduced this to match with the parent's width 
    padding: 0; 
    margin: 0 auto; 
    position: relative; 
}

在sceleton.css線25：

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 
{ 
    float: left; 
    display: inline; 
    //margin-left: 5px; Remove these 2 
    //margin-right: 5px; Remove these 2 
}

EDIT2：第一個框越來越推下來一點點。這是因爲在第一個盒子上你缺少一個div < - >在第二個和第三個盒子裏面你有一個額外的div。

<div class="wrapper margin-bot"> 
    <img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt=""><a href="moreGEN.html"> <img src="http://www.webstertoolbox.com/media/wysiwyg/images/duralume.gif" alt="" width="103" height="41"></a> 
    <div class="extra-wrap">&nbsp;</div> // THIS IS THE EXTRA DIV 
</div>

你有兩個選擇在這裏：

1）股利

<div class="extra-wrap">&nbsp;</div>

添加到第一箱

2）從盒中取出2該div和3

來源

2013-07-31 05:47:14 Thanos

將它們排列起來。一些如此簡單的事情。這是我的代碼更改http://www.webstertoolbox.com你能告訴我爲什麼他們看起來不像這個網站？ http://websterdefined.com/erg1/ –

你好Thanos，最後一點代碼不知道我明白。我沒有一個Sceleton.css頁面，我應該改變它？再次感謝！！ –

嗨，弗蘭克。你可以在這裏找到sceleton.css：http://www.webstertoolbox.com/skin/frontend/default/erglighting/css/skeleton.css。不要忘記總是保留一份以前的CSS副本，或者你可以做我所做的事情，評論舊的風格並在他們旁邊留下一個日期，以防萬一你想稍後搜索它們，如果有重大突破。 – Thanos

.cms-home類幫助你不影響其他頁面佈局。在您的樣式表中添加：

.cms-home .wrapper { 
    overflow: visible; //For big banner 
} 
.cms-home .bg-3 { 
    overflow: visible; 
    width: 33%; 
    display: inline-block; 
}

來源

2013-07-31 06:00:15 Astery

我遇到了CSS讓廣告排隊的問題

回答

相關問題