左浮动元素不对齐

时间：2015-05-17 23:56:27

标签： html css css-float

我已经在标题下方编写了头条横幅和新闻容器。现在我试图制作我的左菜单，但是会发生这种情况：

Screenshot

而不是反对标题和新闻容器，他们会越过它们。

HTML代码：

<div style="width: 269px;">
<h1 style="text-align:left;">Newsletter</h1>
<div id="newsletter"></div>
<h1 style="text-align:left;">Prizes</h1>
<div id="prizes"></div>

CSS代码：

#prizes {
background-image: url("http://i.imgur.com/vv8Czrb.png");
float:left;
width: 269px;
height: 136px;
}

#newsletter {
background-image: url("http://i.imgur.com/2sV7lc9.png");
float:left;
width: 269px;
height: 284px;
}

到目前为止我所拥有的一切

＆＃13;
＆＃13; 
#container {
  padding-left: 200px;
  width: 100%;
  clear: both;
}
h1 {
  font-size: 30px;
}
p {
  display: inline block;
  width: 261px;
  height: 155px;
}
#left {
  background-image: url("http://i.imgur.com/3rpQxq8.png");
  float: left;
  width: 261px;
  height: 154px;
  margin-left: 90px;
}
#left:hover,
#right:hover,
#center:hover {
  position: relative;
  background-image: url("http://i.imgur.com/igiLhj9.png");
  z-index: 82;
}
#left-readmore:hover,
#right-readmore:hover,
#center-readmore:hover {
  background-image: url("http://i.imgur.com/l5UpJa5.png");
}
#left-readmore p,
#right-readmore p,
#center-readmore p {
  padding-top: 7px;
  text-align: center;
  color: #fff;
}
#right {
  background-image: url("http://i.imgur.com/3rpQxq8.png");
  float: right;
  width: 261px;
  height: 154px;
  margin-right: 90px;
}
#center {
  background-image: url("http://i.imgur.com/3rpQxq8.png");
  margin: 0 auto;
  width: 261px;
  height: 154px;
}
#left-txtcontainer {
  background-image: url("http://i.imgur.com/3vF32is.png");
  float: left;
  width: 261px;
  height: 155px;
  margin-left: 90px;
}
#right-txtcontainer {
  background-image: url("http://i.imgur.com/3vF32is.png");
  float: right;
  width: 261px;
  height: 155px;
  margin-right: 90px;
}
#center-txtcontainer {
  background-image: url("http://i.imgur.com/3vF32is.png");
  margin: 0 auto;
  width: 261px;
  height: 155px;
}
#left-readmore {
  background-image: url("http://i.imgur.com/iIJbqsY.png");
  float: left;
  width: 262px;
  height: 26px;
  margin-left: 90px;
}
#right-readmore {
  background-image: url("http://i.imgur.com/iIJbqsY.png");
  float: right;
  width: 262px;
  height: 26px;
  margin-right: 90px;
}
#center-readmore {
  background-image: url("http://i.imgur.com/iIJbqsY.png");
  margin: 0 auto;
  width: 262px;
  height: 26px;
}
#head-banner {
  background-image: url("http://i.imgur.com/z1YxsTp.png");
  width: 820px;
  height: 250px;
  margin-left: 290px;
  margin-right: auto;
}
#prizes {
  background-image: url("http://i.imgur.com/vv8Czrb.png");
  float: left;
  width: 269px;
  height: 136px;
}
#newsletter {
  background-image: url("http://i.imgur.com/2sV7lc9.png");
  float: left;
  width: 269px;
  height: 284px;
}
＆＃13; 
<div style="float:left;width: 269px;">
  <h1 style="text-align:left;">Newsletter</h1>
  <div id="newsletter"></div>
  <h1 style="text-align:left;">Prizes</h1>
  <div id="prizes"></div>
  <br clear="all" />
</div>

<div id="head-banner"></div>

<br style="clear:both;">

<div id="container">

  <div id="left">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
  <div id="right">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
  <div id="center">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
</div>

<div id="container">
  <div id="left-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
  <div id="right-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
  <div id="center-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
</div>
<div id="container">
  <div id="left-readmore">
    <p>Read more...</p>
  </div>
  <div id="right-readmore">
    <p>Read more...</p>
  </div>
  <div id="center-readmore">
    <p>Read more...</p>
  </div>
</div>
<br />
<div id="container">
  <div id="left">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
  <div id="right">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
  <div id="center">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
</div>

<div id="container">
  <div id="left-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
  <div id="right-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
  <div id="center-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
</div>
<div id="container">
  <div id="left-readmore">
    <p>Read more...</p>
  </div>
  <div id="right-readmore">
    <p>Read more...</p>
  </div>
  <div id="center-readmore">
    <p>Read more...</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

每当你在CSS中使用float时，一定要清除结构。以下是使用旧代码（2010年之前）了解的示例：

<div id="container">
    <div id="left">Left Menu</div>
    <div id="right">Right Body Content</div>
    <br clear="all" />
</div>

这是一个可以开始玩的JSFiddle：https://jsfiddle.net/qqLry5tn/

现在的许多框架（引导程序，网格布局等）通常会将清除添加到容器标记中以消除额外的需要

以下是一篇很好的文章，解释了我们需要澄清的原因：https://css-tricks.com/all-about-floats/

希望这有帮助！

相关问题
最新问题