Question

当我在浏览器中加载它时，我的问题如下：扩展的div似乎包含三个较小的div。希望的结果只是div在三个之下。我已经尝试将float:left放在展开的那个上，但我的页脚重叠了所有。我已经在论坛上寻找解决方案，但没有发现任何合适的内容。

How to make div not overlap another div inside parent div

我找到的帖子。

div#content-wrapper {
  margin: 0 auto;
  width: 1024px;
  background-color: #F5F5F5;
  position: relative;
}

#one,
#two,
#three {
  width: 30.75%;
  border-style: solid;
  border-width: 1px;
  margin: 25px 10px 0px;
  font-size: 14px;
}

#one,
#two {
  float: left;
}

#three {
  float: left;
  clear: none;
}

#expanded {
  width: 97%;
  border-style: solid;
  border-width: 1px;
  margin: 25px 10px 0px;
  font-size: 18px;
}

footer{
  margin: 50px 0px 0px;
  width: 100%;
  text-align: center;
  background-color: #1F1F1F;
  color: #F5F5F5;
  padding: 1px 0px;
 }

<div id="content-wrapper">
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="expanded">
    <a id="boxtitle-ex" href="#">titel 4</a>
    <p>Lorem ipsum dolor
    </p>
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <footer> Footer </footer>
</div>

Answer 1

这样的东西？

＆＃13;

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

div#content-wrapper{
  margin: 0 auto;
  width: 1024px;
  background-color: #F5F5F5;
  position: relative;
}
#one, #two, #three {
  width: 30.75%;
  border-style: solid;
  border-width: 1px;
  margin: 25px 10px 0px;
  font-size: 14px;
}
#one, #two { float: left; }
#three { float: left; clear: none; }

#expanded{
  width: 97%;
  float:left;
  border-style: solid;
  border-width: 1px;
  margin: 25px 10px 0px;
  font-size: 18px;
}
footer{
  margin: 50px 0px 0px;
  width: 100%;
  text-align: center;
  float:left;
  background-color: #1F1F1F;
  color: #F5F5F5;
  padding: 1px 0px;
 }

＆＃13;

<div id="content-wrapper">
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="expanded">
    <a id="boxtitle-ex" href="#">titel 4</a>
    <p>Lorem ipsum dolor
    </p>
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <div id="one">
    <a id="boxtitle" href="#">titel 1</a>
    <p>L
  </div>
  <div id="two">
    <a id="boxtitle" href="#">titel 2</a>
    <p>L
  </div>
  <div id="three">
    <a id="boxtitle" href="#">titel 3</a>
    <p>L
  </div>
  <footer> Footer </footer>
</div>

＆＃13;

如何阻止div重叠三个较小的一个

1 个答案: