Question

无论出于何种原因，我无法完全理解位置和浮动如何协同工作。我正在尝试为我练习一个简单的测试网站。在标题中，我有一个广告div，一个div用于网站名称，另一个div用于菜单/导航。在广告div中，我还有其他三个div。我希望左边的那个和右边的一个大约是页面的25％，而中间的那个大约是页面的45％。我希望它们是内联的。但是，当我能够内联广告时，不幸的是，其他div也会内联（或者至少是下一个div）。有人能给我一个很好的解释（链接）如何定位和浮动工作。这是我的HTML和CSS。

<div class="header">
  <div class="bs20b br5">
    <div class="ad1 ads">
      Ad1
    </div>
    <div class="ad2 ads">
      Ad2
    </div>
    <div class="ad3 ads">
      Ad3
    </div>
 </div>
 <div class="sitename">
   CITISI
 </div>
  <div class="menu">
    MENU
  </div>
</div>

body
{
  background-color: #EEE;
}

.ads
{
 position: relative;
 float: left;
 border: 1px solid black;
}

.ad1
{
 text-align: center;
 width: 100px;
}

.ad2
{
 width: 200px;
}

.ad3
{
 width: 100px;
}

.bs20b
{
 -webkit-box-shadow: 0px 0px 20px black;
 -moz-box-shadow: 0px 0px 20px black;
 box-shadow: 0px 0px 20px black;
}

.br5
{
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.sitename
{
}

感谢任何帮助。感谢。

修改的我找到了这个网站，步骤9似乎是我需要的。但是，如果我没有设置位置，我应该漂浮吗？几乎我见过的每一个例子都表明它们已被设定。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 1

当你为之后需要的任何元素设置浮动时，添加一个带有clear的div：两种样式都让浏览器知道你已经使浮动加入并在新行中启动下一个div

<div class="header">
  <div class="bs20b br5">
    <div class="ad1 ads">
      Ad1
    </div>
    <div class="ad2 ads">
      Ad2
    </div>
    <div class="ad3 ads">
      Ad3
    </div>
 </div>
    <div style="clear:both">
 <div class="sitename">
   CITISI
 </div>
  <div class="menu">
    MENU
  </div>
</div>

Answer 2

你需要清除浮子。

将此添加到.bs20b：

 overflow:hidden;

http://jsfiddle.net/AlienWebguy/zbtNY/

Answer 3

我没看过你的标记。

当你同时使用两者时，float将把元素放在左边或右边，无论你说什么。 position：relative然后将元素相对于float放置的位置。

Answer 4

这些网址上的视频非常有用，并且具体解释了float和position。 http://code.google.com/edu/submissions/html-css-javascript/#css

Answer 5

忘记任何位置属性。在你的例子中它没用。

使用此处提到的 clear：both 方法。
或者，您可以为父级设置 overflow：hidden div，包括浮动div。
另一种方法是使用 display：inline-block 表示您的元素想要排成一行

需要帮助理解css的“位置”和“浮动”

5 个答案: