Question

我已经查看了很多同样问题的问题，据我所知，这些问题都不适用于我的情况。当然，我是一个新手，可能只是错过了连接。无论如何，我有一个简单的网页，我正在设计Facebook上的自定义选项卡。我在右侧底部的链接（转到广告）已正确浮动到右侧。但是图像块和顶部的标题不会正确。我将包含适用于这些元素的代码片段。

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没有定义的宽度（因此将其自身设置为最大宽度），它无处可浮动

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

div没有浮动到右边

1 个答案: