我已經瀏覽了很多問題,詢問同樣的事情,並且據我所知,沒有一個適用於我的情況。當然,我是一個新手,可能會錯過連接。無論如何,我有一個簡單的網頁,我正在爲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>
爲了浮動小容器divs他們需要一個固定的寬度方向。 –