html - div不向右浮动

Question

我浏览了很多问同样问题的问题，据我所知，没有一个适用于我的情况。当然，我是新手，可能只是错过了连接。不管怎样，我有一个简单的网页，我正在为 Facebook 上的自定义选项卡设计。我在右侧底部的链接(指向广告)已正确 float 到右侧。但是图像 block 和顶部的标题不会正确。我将包含适用于这些元素的代码片段。

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>

Answer 1

看起来您的目标是 Div 并告诉它向右浮动 - 因为 div 没有定义的宽度(因此将其自身设置为最大宽度)，它没有地方可以 float 。

您可以设置一个宽度然后 float 整个 div，或者只使用 text-align: right;将 div 中的元素向右推。