2016-05-07 179 views
0

我已經瀏覽了很多問題,詢問同樣的事情,並且據我所知,沒有一個適用於我的情況。當然,我是一個新手,可能會錯過連接。無論如何,我有一個簡單的網頁,我正在爲Facebook上的自定義標籤設計。我在右側底部的鏈接(發佈到廣告)已經正確地浮在右側。但圖像塊和頂部的標題不會正確。我將包含適用於這些元素的代碼片段。div不漂浮在右邊

body { 
 
    background-color: #C00000; 
 
} 
 
p { 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
h1 { 
 
    color: white; 
 
    text-decoration: underline; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
h3 { 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
h4 { 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
li { 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
td { 
 
    color: black; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
tr:nth-child(odd) { 
 
    background-color: white; 
 
} 
 
tr:nth-child(even) { 
 
    background-color: gainsboro; 
 
} 
 
div.content { 
 
    background-color: black; 
 
    width: 730px; 
 
    margin: 20px; 
 
    padding-right: 20px; 
 
    padding-left: 20px; 
 
    padding-bottom: 20px; 
 
    border-radius: 25px; 
 
} 
 
div.brands { 
 
    float: right; 
 
    margin-top: -15px; 
 
} 
 
div#providers { 
 
    float: right; 
 
} 
 
button:hover { 
 
    background-color: black; 
 
    color: white; 
 
} 
 
#ads { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
a#ads:hover { 
 
    text-decoration: underline; 
 
    color: B22222; 
 
} 
 
#ads:visited { 
 
    color: white; 
 
}
<div class="content"> 
 
    <h1 style="margin-bottom:1em;">Our Services</h1> 
 
    <div class="brands"> 
 
    <h3>Our Best Brands</h3> 
 
    <a href="http://www.stihlusa.com/" target="_blank"> 
 
     <img src="http://www.stihlusa.com/content/images/layout/stihl_print_logo.gif" alt="stihl logo" height="24%" width="24%" style="padding-right:15px;" /> 
 
    </a> 
 
    <a href="http://www.acehardware.com/category/index.jsp?categoryId=21503026" target="_blank"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Craftsman_logo.svg/215px-Craftsman_logo.svg.png" alt="craftsman logo" /> 
 
    </a> 
 
    <br/> 
 
    <a href="http://www.acehardware.com/search/index.jsp?kw=AMY+HOWARD+AT+HOME" target="_blank"> 
 
     <img src="http://www.granbyace.com/images/featured/featured-brands/Amy-Howard-logo-642x335.png" alt="amy howard logo" style="padding-top:15px; padding-right:15px;" height="25%" width="25%" /> 
 
    </a> 
 
    <a href="http://www.acehardware.com/family/index.jsp?categoryId=35612726" target="_blank"> 
 
     <img src="http://www.acehardware.com/cms_widgets/22/78/2278272_assets/brand_07_valspar.png" alt="valspar logo" /> 
 
    </a> 
 
    </div> 
 
    <h3>Full Service Paint Center</h3> 
 
    <p style="width:40%">At our paint center, we can make any color from our color chips. Or if you need something special, we can custom match colors for a perfect fit. We offer Valspar Optimus, Valspar Aspire, Clark+Kensington, and Royal paint.</p> 
 
</div>

+0

爲了浮動小容器divs他們需要一個固定的寬度方向。 –

回答

2

看起來你所定位的事業部,並告訴它漂浮的權利 - 作爲div有沒有定義的寬度(並且這樣的設置是獨自最大寬度),沒有什麼地方爲它浮動。

您可以設置寬度然後浮動整個div,或者使用text-align:right;將div內的元素推向右側。

+0

非常感謝!讓我嘗試一下。在過去的2個小時裏,我一直在撓頭,試圖弄清楚爲什麼它不起作用。這解決了問題! – Kevin

+0

儘量不要過多考慮它,任何開發人員工作的90%都是使用谷歌搜索*他們已經知道,代碼是一個頭腦f * ck:P – Thomh

+0

所以真的!再次感謝! – Kevin